Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pure CSS tooltip #40875

Open
2 tasks done
fudom opened this issue Sep 27, 2024 · 1 comment
Open
2 tasks done

Pure CSS tooltip #40875

fudom opened this issue Sep 27, 2024 · 1 comment

Comments

@fudom
Copy link

fudom commented Sep 27, 2024

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.

@fudom fudom added the feature label Sep 27, 2024
@Alex-Toucan
Copy link

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

React Bootstrap is a thing for React users. 🙃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants