question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabindex="-1" ignored inside a Tooltip

See original GitHub issue

Currently, when using a Tooltip around any kind of html element, the tabindex set on the child content is ignored. For the sake of example, this works absolutely fine (the button gets no focus when tabbing via keyboard):

<button  tabindex="-1">
  click me
</button>

However, wrapping the button with a tooltip results in incorrect behavior - the button catches focus when user jumps through elements with tab key:

<HmbkTooltip Title="Some text">
  <button  tabindex="-1">
      click me
  </button>
</HmbkTooltip>

Is there any workaround for that?

Is there any solution to enforce tabindex=-1 (or at least a similar behavior) on a Tooltip’s content?

Bonus question: is there a generic way to achieve such an effect on other components?

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
ElderJamescommented, Jul 14, 2022

If all goes well, there will be a release by the end of the week.

1reaction
lukblazewiczcommented, Jul 13, 2022
Read more comments on GitHub >

github_iconTop Results From Across the Web

[Bug Report] el-tooltip ignoring tabindex property when ...
When tabbing on the inputs, the tooptip is focused. But the indextab is set to -1. What is Expected? It should not be...
Read more >
How to enable Bootstrap tooltip on disabled button?
The idea is to add the tooltip to a parent element with the selector option, and then add/remove the rel attribute when enabling/disabling...
Read more >
Control focus with tabindex - web.dev
If there's no radio element after the one that's focused, set the tabindex value of the first radio element in the group to...
Read more >
Tooltips · Bootstrap v5.0
Documentation and examples for adding custom Bootstrap tooltips with CSS and ... Tooltips can be triggered thanks to an element inside a shadow...
Read more >
Tooltips with CSS3
Another possibility is to ignore IE6 altogether and make use of the hover pseudo class in conjunction with the parent element that contains...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found