search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.96k stars 78.89k forks source link

Pure CSS tooltip #40875

Open fudom opened 2 months ago

fudom commented 2 months ago

Prerequisites

Proposal

Use tooltips with CSS only, instead of popper.js. CSS tooltips can be realized e.g. with the pseudo elements before/after. Some 3rd party libraries (not validated the implementation):

.tooltip::after {
  content: attr(data-tooltip);
  // etc.
}

Or other attributes like aria-label or the title attribute, which already shows the browsers native tooltip. But I'm not sure if we can suppress the native title tooltip. Anyway... CSS Tooltips would be nice. For tooltip with HTML content, we could e.g. child element (instead of pseudo element).

Motivation and context

Bootstrap currently uses popper.js for the tooltips. And this must be initialized manually by query select all elements. This works well for static HTML pages, but if you use something like Angular, React, Vue, or Svelte, you'll notice some issues.

Alex-Toucan commented 2 months ago

https://react-bootstrap.github.io/

React Bootstrap is a thing for React users. 🙃