Skip to main content
CSS is fun and cool and I like it.

Articles Tagged tooltip

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
4 Articles
{
,

}
Article

Reusable Popovers to Add a Little Pop

Avatar of Mateusz Rybczonek
Author
Mateusz Rybczonek

A popover is a transient view that shows up on top of a content on the screen when a user clicks on a control button or within a defined area. For example, clicking on an info icon on a specific list item to get the item details. Typically, a popover includes an arrow pointing to the location from which it emerged.

Popovers are great for situations when we want to show a temporary context to get user’s attention when interacting … Read article “Reusable Popovers to Add a Little Pop”

Link

Revisiting the abbr element

Avatar of Chris Coyier
Shared by
Chris Coyier

An irresistible HTML element deep dive from Ire Aderinokun, this time on the <abbr title=""></abbr> element for abbreviations. You can kinda just use it (JUI) and it works fine, but if you’re hoping to make a tooltip for them (which works on touchscreens as well), then it’s much more complicated.

The end result is leaving the semantic HTML alone and progressively enhancing with ~50 lines of JavaScript that adds interactive wrapper elements and event handlers. … Read article “Revisiting the abbr element”

Our Notes   /   Read at bitsofco.de
Link

Popper.js

Avatar of Chris Coyier
Shared by
Chris Coyier

Speaking of tricky things to get right: tooltips!

Tooltips need to be particularly self-aware, so they don’t stick out someplace where they can’t be read. Then continue to be smart as the page state changes, like is resized or scrolled. Popper.js looks like it handles all this stuff nicely.

The project page doesn’t say this, but creator Federico Zivolo showed me how it’s also friendly with React, because you can render the tooltip element itself within the component and it … Read article “Popper.js”

Our Notes   /   Read at popper.js.org