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
2 Comments
Go to Comments

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

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

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

Our Notes   /   Read at popper.js.org
Article

Collision Detection

Avatar of Chris Coyier
Author
Chris Coyier
15 Comments
Go to Comments

I posted about jQuery UI's position feature years ago, but I was just thinking of how useful the collision detection part of that feature is. In a nutshell: you can position an element where you want them to go, but if it calculates that where you're putting it would be offscreen or otherwise hidden, it will adjust the positioning to fix it. … Read article