CODEWITHSUNDEEP
javascripthtml
Eddy
Eddy

Reputation: 566

Is it possible to place a link within a title attribute?

Is it possible to place a link within a title attribute? In the example below I want "Click here" to link to google.com. My reason for wanting this is because my title attribute contents are placed as a caption under my photos.

title="Click here for Google"

Upvotes: 1

Views: 1002

Answers (2)

Bruno Toffolo
Bruno Toffolo

Reputation: 1554

No, it is not possible. As the title will appear as a small tooltip while the user hovers the mouse in the component where the title attribute is placed in, this tooltip will fade out as soon as the user moves the mouse out of the object.

As it would be needed that the user moves the mouse from the object into the tooltip, it would disappear as soon as the user tries to click the link, so this behavior is not possible.

If you try using an HTML tag in your title attribute it will show up as usual text, such as in the screenshot below.

Example

Note: If you want to have exactly this behavior, I suggest you use a framework such as Bootstrap and try to make use of the popover component, through the trigger attribute, to show automatically as a tooltip and cover your needs. Or adapt the tooltip component not to hide automatically when the mouse moves out of the focused component.

Upvotes: 3

web-tiki
web-tiki

Reputation: 103750

You can't add HTML tags in the title="" attribute. But you can make another element "behave" like a title attribute and display the link when the image is hovered :

img, img:hover + a, a:hover{
  display:block;
  width:200px;
}
a {
  display: none;
}
<img src="http://i.imgur.com/RECDV24.jpg" />
<a href="https://www.google.com/">Click here for google</a>

Upvotes: 1

Related Questions