Tooltips are usually created and triggered with JavaScript. But, CSS is now powerful enough to handle a simple tooltip functionality itself. Hint.css is a tooltip library that is built with SASS and only uses CSS + HTML.

The library uses

data

attribute,

content

property, pseudo elements and CSS3 transitions.

Hint.css

Tooltips are simple-yet-good looking, has arrows and can be positioned on any side of the parent element.

And, they don’t have to be visible only when hovered but can be set as “always showing” too.

Compatibility: All Modern BrowsersWebsite: https://kushagra.dev/lab/hint/
Download: https://github.com/chinchang/hint.css

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

14 − eight =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

Detect screen size with jQuery and apply a CSS style

Sometimes we need to format the content differently according to the screen resolution of the user. One of the ways to do this is to simply detect the screen width using the screen.width property and change the stylesheet.

Cross-browser CSS3 box-shadow

Simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version).
Read More

HTML & CSS: A Beginner’s Guide

HTML & CSS: A Beginner's Guide teaches you with the aid of colourful screenshots and diagrams how to create web sites and style them using Cascading Style Sheets. This book offers practical guidance, examples and know how without the long boring technical fluff and how to apply it to related Web development issues.