Simple and very light javascript tooltips with no dependencies, uses the "aria-label" attribute with full fallback for old browsers. 🤘
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.
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.
The CSS file provided adapts the position of little arrow for right to left reading languages (based on the <html dir=""> tag).
See in action this: online demo here
Updated version: online demo here
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent