Suggestion: Add focus-based trigger for Tooltips (e.g. tooltip-focus)

[SanmayJoshi]

Hi there 👋

Currently, DaisyUI tooltips are triggered only on hover, which is great for mouse users. However, for accessibility, better keyboard navigation and popup behaviour, it would be really helpful if tooltips could also be triggered on focus.

Suggestion:
Introduce a new class, such as tooltip-focus, which would behave like tooltip but trigger the tooltip when the element receives focus (e.g., via keyboard tabbing). This would allow developers to use tooltips effectively in more interactive and accessible interfaces.

Example Use Case:

<div class="tooltip-focus" data-tip="hello">
  <button class="btn">Hover me</button>
</div>

This wouldn't interfere with the existing tooltip class and would give developers explicit control over the trigger behaviour.

[saadeghi]

This is already focusable with keyboard:

<div class="tooltip" data-tip="hello">
  <button class="btn">Hover me</button>
</div>

https://play.tailwindcss.com/cVsGGtoYuh

1. click on background
2. press tab key to see the tooltip.

[SanmayJoshi]

I was not clear enough I think. Forgive me for that.

The behaviour I am thinking of is that the user would have to click the button to show the tooltip, and clicking anywhere else on the screen would make the tooltip hidden again. It's kind of like data-trigger=focus from Bootstrap. The behaviour may be achieved with .tooltip:focus instead of .tooltip:hover I think. With a different class like tooltip-focus it would be .tooltip-focus:focus.

[saadeghi]

If it's not showing with hover, I wouldn't call it tooltip. For that, you can use daisyUI dropdown:
https://play.tailwindcss.com/kzFStVUFS5

Let me know if you have a question.

[SanmayJoshi]

That's perfect! It helps with creating behaviour similar to bootstrap popovers as well. Thanks a lot.