Tooltips not working when inside the form-floating class
Open
Nobody has claimed this yet.
css
v5
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.6k
- Avg merge
- 7h 19m
- Merged PRs (30d)
- 35
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
The tooltip inside the form-floating class only shows on tab navigation but it is not showing on mouse hover.
Reduced test cases
I have replicated it using stackblitz:
https://stackblitz.com/edit/xbrwst?file=index.html
removing pointer-events: none seems to fix the issue.
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Microsoft Edge
What version of Bootstrap are you using?
5.2
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the StackBlitz reduced case in index.html and reproduce the tooltip behavior in Chrome or Microsoft Edge. Inspect the interaction between the form-floating class and pointer-events: none, then verify that tooltips appear on mouse hover as well as tab navigation without breaking the existing form behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, css, html, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100