CA
cara-tm/simple-tooltips
:speech_balloon: Simple javascript and CSS tooltips with no dependencies, use of aria-label with full fallback for old browsers. :v:
Simple JS Tooltips
Simple and very light javascript tooltips with no dependencies, uses the "aria-label" attribute with full fallback for old browsers. 🤘
Usage
Simply add a tooltip class to your links. The script transferts the content of the title attributes into aria-label ones and do not affect old browsers which keep showing the default tooltip mode.
Limitations and browser bugs noticed
Edge browser (and old WebKit engines) underlines the tooltips content for links with a "text-decoration" rule (without possible corrections): https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13140617/.Edge browser shrinks tooltips with links surrounding long sentences. Solution: reduice the links length.For links with a.table-cellortable-rowdisplay, the tooltips are shown full width (according to their parents). Solution: change the tooltip'sdisplayandwidthproperties (ex..parent .link [class^=tooltip]:after {display: table;min-width: auto})- Some old Webkit engine browsers keep tooltips text content underlined. The only solution consists to apply the CSS property
text-decoration: noneonto the links.
RTL languages
The CSS file provided adapts the position of little arrow for right to left reading languages (based on the <html dir=""> tag).
Demos
See in action this: online demo here
Updated version: online demo here
On this page
Languages
HTML52.7%CSS30.8%JavaScript16.5%
Contributors
MIT License
Created August 8, 2015
Updated June 14, 2018