In the bootstrap documentation for tooltips, it uses <a href="#" rel="tooltip" title="first tooltip">hover over me</a>
. Tooltips are just cosmetic though. Not css style but just a bit of JS to change how a title attribute is presented.
The "rel" attribute is meant to be used to tell a bot (such as google) about the nature of a link. The options are alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, and tag.
Is it not bad practice to use rel = "tooltip"
since tooltip is cosmetic, says nothing about the nature of the link, and isn't otherwise bot or browser interpret-able?
Tooltips are just cosmetic though. Not css style but just a bit of JS to change how a title attribute is presented. The "rel" attribute is meant to be used to tell a bot (such as google) about the nature of a link.
The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" . CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip. The tooltiptext class holds the actual tooltip text.
On the HTML elements that you want to have the tooltip, just add a title attribute to it. Whatever text is in the title attribute will be in the tooltip.
Here is how to do it with position: absolute and relative . On the container, set position: relative , and display: table (shrink to fit). For the position: absolute tooltip, set top: 0 , and left: 100% (moves to the right edge of the relative container).
By using rel="tooltip"
your document won't validate by the W3C web standards.
You will get this error from the W3C validator:
Bad value tooltip for attribute rel on element a: Not an absolute IRI. The string tooltip is not a registered keyword or absolute URL.
It would be better, identifying a tooltip link with a class like:<a href="#" class="tooltip" title="first tooltip">hover over me</a>
Or easily you can replace rel
with the data-rel
attribute (which is absolutely valid).
Example:
$("a[data-rel]").tooltip();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With