Known Participant

Answered

Large text in the title

Forum|Forum|3 years ago
November 15, 2022
7 replies
2579 views

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>

This topic has been closed for replies.

Correct answer L e n a

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>

L

L e n a

Community Expert

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

A

aviel222Author

Known Participant

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.

O

osgood_

Brainiac

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.

Nancy OShea

Community Expert

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

Anselm Hannemann

Community Expert

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.

BenPleysier

Community Expert

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!

L

L e n aCorrect answer

Community Expert

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>

Anselm Hannemann

Community Expert

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);
}

L

L e n a

Community Expert

@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

Nancy OShea

Community Expert

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

Anselm Hannemann

Community Expert

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;
}

Jon Fritz

Community Expert

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

Anselm Hannemann

Community Expert

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.

An aside on casing and spacing

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded