Geek Answers Handbook

How to save the value of the title attribute after clicking?

Consider the following HTML markup:

<img src="info.png" title="Password should contain 6-10 characters">

On output, when users hover over the image, the value of the title attribute is displayed in a pop-up window. It is a good idea to display information to users.

But this information disappears when users click on the image (note that users may tend to click rather than freeze)

What can I do (for example, using jQuery) to keep the information visible (even if the user clicks) until the mouse pointer over the image?

I tried the following, but this did not solve this problem:

 jQuery('img[src="info.png"]').click(function(event){ event.preventDefault(); });

EDIT: Is there a way to make “click equals hover” in jQuery?

+2
source share
2 answers

You will need to create your own tooltip.

 <img src="info.png" alt=""> <span>Password should contain 6-10 characters</span>

You don't need JavaScript, pure CSS is enough:

 img[src=info.png] + span { display: none; } img[src=info.png]:hover + span { display: inline; }

Edit: If you don't want to touch your HTML, you can create tooltips using a script. Here is a jQuery example:

 var img = $("img[src=info.png]"); $("<span>").text(img.attr("title")).insertAfter(img); img.attr("title", "");
+2
source

The display of img title or a link is browser dependent and you do not control it. If you want to have your own behavior and make sure that this behavior is a cross browser, you need to:

  • get rid of default browser behavior by removing all title and alt attributes
  • override your own tooltips using one of many available libraries

Good luck.

+1
source

More articles:


All Articles