CODEWITHSUNDEEP
javascriptjqueryhtml
siva636
siva636

Reputation: 16441

How to keep the title attribute value visable after clicking?

Consider the following HTML markup:

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

In the output, when users hover on the image, the value of the title attribute is displayed in a pop up. This is a nice idea to display information to the users.

But, this information is vanished when users click the image (please note users may tend to click rather than hovering)

What can I do (using jQuery for example) to keep the information visible (even if the user clicks) as far as the mouse pointer is on the image?

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

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

EDIT : Are there any way to do "clicking is equal to hovering" in jQuery?

Upvotes: 2

Views: 2532

Answers (2)

gilly3
gilly3

Reputation: 91557

You'll have 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 the tooltips with script. Here's a jQuery example:

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

Upvotes: 2

solendil
solendil

Reputation: 8458

The display of img's titles or a's links is dependant on the browser and you have no control over it. If you want to have your own behaviour and make sure this behaviour is cross-browser, you will need to :

  1. get rid of default browser behaviour by removing all title and alt attributes
  2. reimplement your own tooltips using one of many libraries available

Good luck

Upvotes: 1

Related Questions