Pure CSS tooltip

[fudom]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

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):

• https://github.com/chinchang/hint.css
• https://github.com/jackdomleo7/Cooltipz.css

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

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

React Bootstrap is a thing for React users. 🙃

[happy2deepak]

We can leverage the position-anchor feature of CSS. It will help us achieve the css only solution. But meanwhile this property is not supported by all browsers yet. https://caniuse.com/?search=position-anchor

[mdo]

I don't think we'll be able to do CSS-only anytime soon given positioning needs. We can revisit this if we get better support for CSS to dynamically adjust it's placement though.