DEV Community

Cover image for CSS Only Tooltips with ::before and ::after
jQueryScript
jQueryScript

Posted on

CSS Only Tooltips with ::before and ::after

CSS Tooltips (Before & After): a pure CSS tooltip library that renders positioned, color-coded bubble tooltips using ::before and ::after pseudo-elements.

Key features:
• Four placement directions: top, bottom, left, right
• Four color variants: default, accent, danger, info
• Hover and keyboard focus support
• Inline text tooltip mode with multi-line layout
• Full theming through CSS custom properties
• Zero JavaScript

Add tooltips to any element with a single data-tip HTML attribute.

👉 Blog Post

👉 Live Demo

Top comments (0)