Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
tooltip

8 Articles
{
,

}
Direct link to the article What Would it Take to Prevent CSS Tooltips From Overflowing?
tooltip

What Would it Take to Prevent CSS Tooltips From Overflowing?

Say you have an elements with CSS tooltips and you’re going to position those tooltips such that it opens up next to the element on hover (or probably better: when clicked/tapped). Next to it where? Above it? What if the …

Avatar of Chris Coyier
Chris Coyier on Jan 11, 2022
Direct link to the article Perfect Tooltips With CSS Clipping and Masking
clip-path mask-image tooltip

Perfect Tooltips With CSS Clipping and Masking

Clipping and masking have been around for a while now in CSS and even have pretty decent browser support. I recently worked on a project that needed to use a clipping technique for tooltips showing above links in text.…

Avatar of Louis Hoebregts
Louis Hoebregts on Jun 17, 2021
Direct link to the article Long Hover
hover tooltip

Long Hover

I had a very embarrassing CSS moment the other day.

I was working on the front-end code of a design that had a narrow sidebar of icons. There isn’t enough room there to show text of what the icons are, …

Avatar of Chris Coyier
Chris Coyier on Mar 16, 2021
Direct link to the article Exploring What the Details and Summary Elements Can Do
details/summary footnotes tooltip

Exploring What the Details and Summary Elements Can Do

We’ve mentioned before just how great the <details> and <summary> elements are. They’re great for quickly making accordions that are accessible to touch, mouse, and keyboard input:

CodePen Embed Fallback

<details> and <summary> can even be used to play/pause gifs…

Avatar of Robin Rendle
Robin Rendle on Nov 26, 2020
Direct link to the article Reusable Popovers to Add a Little Pop
popover tooltip vue vue components

Reusable Popovers to Add a Little Pop

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 …

Avatar of Mateusz Rybczonek
Mateusz Rybczonek on Aug 26, 2019
Direct link to the article Revisiting the abbr element
abbr html elements tooltip

Revisiting the abbr element

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 …

Avatar of Chris Coyier
Chris Coyier on Feb 7, 2019
Direct link to the article Popper.js
tooltip

Popper.js

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. …

Avatar of Chris Coyier
Chris Coyier on Apr 23, 2016
Direct link to the article Collision Detection
collision jQuery tooltip

Collision Detection

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, …

Avatar of Chris Coyier
Chris Coyier on Nov 11, 2014

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top