Frequently Asked Questions

Index:

• Why doesn't tooltip show when used on an img or input tag?
• Is there any difference between Hint.css and other JavaScript based tooltip libraries

Why doesn't tooltip show when used on an img or input tag?

Hint.css (or any tooltip library which is CSS only) works with generated content pseudo elements (:after & :before). These pseudo elements are not supported by all tags. For eg. img, input, select are some tags which cannot have pseudo generated content. This is the reason why tooltips don't work when used on such tags.

Solution

Recommended way is to wrap such tags into some other generic div or span tag and put the tooltip on those wrapping tags instead. Eg. <div aria-label="My tooltip" class="hint--top"> <img src="some-image.png"/> </div>

Is there any difference between Hint.css and other JavaScript based tooltip libraries?

Answer

Yes.

• Auto-placement: The primary difference is that JavaScript based tooltips are mostly smart in their placement. They are capable of auto-calculating the best position to show the tooltip for each element based on its position on the page. But Hint.css being CSS-only cannot have such logic to auto-calculate best placement. This means that you need to yourself determine the best placement of tooltips by giving them appropriate position classes like hint--top, hint--top-right etc.
• HTML content: Hint.css tooltips cannot have HTML inside them as they are made up of pseudo elements. Though you can still use special entities like unicode characters for tooltip content. Eg. aria-label="ʘ‿ʘ 😎"