Skip to content

How to hide tooltip in icon-only Button? #1483

Answered by metonym
testforvln99 asked this question in Q&A
Discussion options

You must be logged in to vote

In that issue, the scenario refers to the native title attribute, which is controlled by browsers.

For the icon-only Button, you can use global CSS that hides the tooltip text. Note that it's important to specify an icon description for accessibility reasons.

Svelte REPL

<Button iconDescription="Tooltip text" icon={Add} />

<style>
  :global(.bx--btn--icon-only:hover .bx--assistive-text) {
    display: none !important;
  }
	
  :global(.bx--btn.bx--btn--icon-only.bx--tooltip__trigger.bx--tooltip--a11y::before) {
    display: none !important;
  }
</style>

Replies: 2 comments 1 reply

Comment options

You must be logged in to vote
0 replies
Answer selected by theetrain
Comment options

You must be logged in to vote
1 reply
@mbgower
Comment options

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
3 participants