How to hide tooltip in icon-only Button
?
#1483
-
When I use Button components like , I found that the iconDescription always pop up. In issue carbon-design-system/carbon#11170 (comment), @jnm2377 told us that "you can also choose not to include the icon description so the title tooltip doesn't pop up", but the icon-only button must have icon description. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
In that issue, the scenario refers to the native 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. <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> |
Beta Was this translation helpful? Give feedback.
-
You really save my time! Thanks for you answer. |
Beta Was this translation helpful? Give feedback.
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