Large text in the title

Report · Nov 15, 2022

Hello, I am attaching a code.
When I "go over" the link, the "title" is displayed.
I request that the font size be large.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

Report · Nov 15, 2022

Hi, the code you show here unfortunately doesn’t reflect what you write above. I don’t see a link and the title you set in the code is only the document title which per default isn’t visible on the browser canvas, only in the tab’s title.

Please give more details on what your goal is so we can help you a bit better.

In general you set font-size via CSS like that in HTML:

<a href="https://yourlink.com/" style="font-size: 28px;">Your link title</a>

For a hover action (mouseover) you need to do this in a separate CSS file and reference it. For that, you may want to check a basic introduction course for HTML and CSS. There are a lot of tutorials available online.

Report · Nov 15, 2022

You can't style the way the title attribute displays with css.

What you need is a tooltip javascript to duplicate the function of the title attribute, and allow you to modify size, style and more.

There are thousands of scripts available online like these: https://www.appcues.com/blog/73-tooltip-plugins-made-with-jquery-css-javascript-or-more

There are also ways to duplicate the function of the title attribute (the tooltip pop up), using css, but you would use the data-title attribute instead, and change your html accordingly. This page explains it pretty well: https://stackoverflow.com/questions/2011142

Report · Nov 15, 2022

That’s true but I still wonder what you want to achieve. From a semantics perspective and also accessibility, you should mark up captions differently:

<figure>
<img src="" alt="Describe image for visually impaired users">
<figcaption>
Your caption goes here
</figcaption>
</figure

and now you can easily style this in CSS:

figure {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

figure figcaption {
position: absolute;
opacity: 0;
transition: all 150ms ease-in-out;
}

figure:hover figcaption,
figure:focus-within figcaption {
opacity: 1;
}

Report · Nov 15, 2022

Default Browser tooltips cannot be custom styled. Tooltips are styled by your browser.

Try using another browser. Each browser (FF, Chrome, Edge, Safari) have their own default styles.

Alternatively, use Bootstrap for your responsive website. Bootstrap has optional classes for data-toggle="tooltip" See below for more details

https://getbootstrap.com/docs/4.6/components/tooltips/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 15, 2022

As @Jon Fritz points out the display of the title attribute is intrinsically linked to the browser, and we cannot act (for the moment) on its aspect.

unfortunately, the CSS tricks we would have at our disposal, can't be applied on single tags (like IMG, A, INPUT, etc...)... so we would have to either encapsulate them in a container tag, or use a javascript.

what ever the solution is, it also implies to disable the real TITLE attribute by setting it to an empty value (this will hide it from the browser)

to demonstrate the trick, and so avoiding to touch your HTML, here is an approcah by nesting the IMG in a SPAN tag, and using a dummy CSS solution

<span class="csstooltip" title="" data-title="The text to be displayed" ><img src="https://via.placeholder.com/300x120" alt=""/></span>

so the CSS, should be as basic as

<style>
        .csstooltip:hover:after {
            position: absolute;
            top: 0;
            left: 0;
            
            content: attr(data-title);
            
            font-size: 25px;
        }
        .csstooltip {
            position: relative;
            display: inline-block;
        }
    </style>

So now back to your own code, the HTML and IMG tag are like

<img title="The text to be displayed" src="https://via.placeholder.com/300x120" alt=""/>

As I don't know how your full page looks like, let me please, add a simple class to it to define the approriate target

<img class="jstooltip" title="The text to be displayed" src="https://via.placeholder.com/300x120" alt=""/>

so now if we still use the same CSS code as above, the script could be

    <script>
        Array.from( document.getElementsByClassName('jstooltip')).forEach(function(img) {
          
            let text = img.getAttribute('title')
            img.setAttribute('title', '') 
            
            let tt = document.createElement('span');
            tt.setAttribute('data-title', text) 
            tt.className = 'csstooltip'
            
            img.parentNode.insertBefore(tt, img);
            tt.appendChild(img);
        });
    </script>

Report · Nov 15, 2022

If you already use a data attribute, you can style that one directly as well. It’s a bit limited but works:

img { position: relative; }
img[data]:hover::after {
  content: attr(data);
  padding: 4px;
  color: black;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 10;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 3px -1px rgba(0,0,0,0.5);
}

Report · Nov 16, 2022

@Anselm Hannemann , I am afraid that your approach will not work, and on two points, but I may have misinterpreted your comment :

On the one hand, as I mentioned in my first comment, pseudo-elements insertions can only be done on container tags and not on singleton tags (IMG, INPUT...)… as you can read on the first note there https://developer.mozilla.org/en-US/docs/Web/CSS/::after

by the way, I don't know why in my first message, I added A which has nothing to do there... so I unchecked it in my previous comment.

In an other hand, you mention the use of data, but where do you get this attribute from, are you talking about data-title ?

In order to avoid any language confusion (which happens to me very frequently) I have just posted an HTML file on https://demo.puce-et-media.com/aviel222/index1.html. feel free to correct it in order to clarify your approach

Report · Nov 15, 2022

On an another matter, this file name is invalid HTML5 code:

Screen Shot 2022-11-15 at 19.37.39.png

File names cannot contain spaces or special characters (@#%^&*). And you should limit file names to 25 characters. For best results, simpify filenames and stick with small case letters. Web servers are cAsE sEnSiTiVe.

Change this: Screen Shot 2022-11-15 at 19.37.39.png

To this: sshot22-11-15.png

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 15, 2022

Hi Nancy, I wonder why it shouldn’t be valid HTML according to the spec? The only thing I found in the spec says "Adjust filename to be suitable for the local file system."

Nevertheless your tips are a good idea but I don’t think it’s invalid and the @ character is even widely spread in filename.

Report · Nov 16, 2022

It may not be illegal to have a file named `Screen Shot 2022-11-15 at 19.37.39.png`, but it is good practice to take @Nancy OShea 's advice.

Servers will replace the spaces with `%20` as in `Screen%20Shot%202022-11-15%20at%2019.37.39.png` resulting in broken links.

Search engines may regard characters after a period (`.`) as the file's extension.

The following is a quote from https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files

An aside on casing and spacing

You'll notice that throughout this article, we ask you to name folders and files completely in lowercase with no spaces. This is because:

Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at test-site/MyImage.jpg and then in a different file you try to invoke the image as test-site/myimage.jpg, it may not work.
Browsers, web servers, and programming languages do not handle spaces consistently. For example, if you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will replace the areas in your filenames with "%20" (the character code for spaces in URLs), resulting in all your links being broken. It's better to separate words with hyphens, rather than underscores: my-file.html vs. my_file.html.

The short answer is that you should use a hyphen for your file names. The Google search engine treats a hyphen as a word separator but does not regard an underscore that way. For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated by hyphens, at least until you know what you're doing. That way you'll bump into fewer problems later down the road.

Trust @Nancy OShea

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Nov 16, 2022

Hi Nancy, I wonder why it shouldn’t be valid HTML

By @Anselm Hannemann

=========

In HTML5 doc types, spaces in filenames are flagged as ERRORS by W3C's HTML Validation Service.

https://validator.w3.org/

Example code:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Code Test</title>
</head>
<body>
<div class="container">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<img src="my file name with spaces.jpg" alt="placeholder" title="dummy image for code testing">
</div>
</body>
</html>

Validation Results:

That's why. 🙂

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 16, 2022

Thanks for explaining, this is a bit fun as I couldn’t find anything in the spec itself so I guess the Validator does more than validating against the HTML spec here.

Report · Nov 15, 2022

I just realized that my commentary can be confusing, so I just made a full HTML file, uploaded to https://demo.puce-et-media.com/aviel222/

the first image is the working draft, the second image is the one with an automated script

Report · Nov 16, 2022

Hi Lena
Your answer is the best for what I wanted, but I have a request:
It is possible to make it so that when I move the mouse over the image, another image will open for me on the left side (at a distance of 20 by 20 pixels from the original image), in other words, when I move the mouse over the image, a "balloon" will open for me which is also an image.

Report · Nov 16, 2022

Hi Lena
Your answer is the best for what I wanted, but I have a request:
It is possible to make it so that when I move the mouse over the image, another image will open for me on the left side (at a distance of 20 by 20 pixels from the original image), in other words, when I move the mouse over the image, a "balloon" will open for me which is also an image.

By @aviel222

Yes, but using a mouse over event alone is not a good solution as it won't work on mobile devices, which can cater for over 50% of your audience. I would consider using an onclick instead of a mouse over event handler or you could use a mouse over event for desktop devices and an onclick event handler for mobile devices. Sorry to complicate issues but there is usually a lot more to building out applications than initially meet the eye.

Report · Nov 16, 2022

I'm glad the previous comment helped

In order to transmit the appropriate parameters, it is necessary to know :

what the URL of the image that should appear in the bubble corresponds to...
- is it an image related to the first same file name with a complementary suffix,
- is it an image that does not react to a specific logic and has its own completely independent file name,
- is this file name already present somewhere in the HTML document, if not, and if the name is completly different, is there is any external JSON logic that can be use...
does the bubble have to move at the same time as the mouse moves
does the bubble appear in addition to the previous bubble that displays text?

Report · Nov 16, 2022

The image is in the same folder as the html file is an image with a completely independent file name, with the extension jpeg/png. The bubble should not move at the same time as the mouse movement. The bubble replaces the previous bubble that displays text. In brief, it's really similar to a bubble with alt [attribute], it's just that it's a big picture.

[Moderator removed preformatting for better readability.]

Report · Nov 16, 2022

Please focus on one subject per question.

Disjointed rollovers or modal image viewers are a totally separate subject from title tooltips.

Please create a new topic for your other questions.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 16, 2022

@aviel222 wrote:
The image is in the same folder as the html file is an image with a completely independent file name, with the extension jpeg/png. The bubble should not move at the same time as the mouse movement. The bubble replaces the previous bubble that displays text. In brief, it's really similar to a bubble with alt [attribute], it's just that it's a big picture.

[Moderator removed preformatting for better readability.]

Having a large image open to the left or right and maybe above or below when clicking on another image is a flawed concept as you need to have the necessary space to allocate the image, that almost certainly wont work on a mobile device and possible not on a desktop either in certain circumstances. Its much better to have a 'modal overlay' wherby when you click on an image the larger image opens centrally in the available browser window space NOT off to the left, right, above or below.

Report · Nov 16, 2022

@aviel222 I fully agree with the advice of @osgood_ and @Nancy OShea , however in order to continue the approach started... just a dummy question, how big is the flying image ?

Report · Nov 17, 2022

Something like 3 cm wide by 1 cm high

Report · Nov 17, 2022

Ok,, I'm starting a new topic: "Image bubble when hovering over an image"

Large text in the title

2 Correct answers

An aside on casing and spacing