Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

rel="tooltip", is it bad practice?

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?

like image 360
Archonic Avatar asked Jan 24 '13 21:01

Archonic


People also ask

What is rel tooltip?

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.

Can we add tooltip in CSS?

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.

How do I display tooltip in HTML?

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.

How do I show the tooltip on the right side?

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).


2 Answers

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>

  • However, the rel attribute is not used by the browser in any way, as you already mentioned, but it may influence your ranking in search engines. Google suggests to validate your documents and to "write good, clean HTML".
  • The rel attribute may also be interesting for accessibility tools like screen readers.
like image 141
Fabian Avatar answered Sep 28 '22 13:09

Fabian


Or easily you can replace rel with the data-rel attribute (which is absolutely valid).

Example:

$("a[data-rel]").tooltip();
like image 30
Kalyan Avatar answered Sep 28 '22 13:09

Kalyan