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.

TooltipIcon maxwidth

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Summary

The tooltip width is not enough for the text inside (aria-label).

tried setting the maxwidth to none but it didn’t help:

.bx–tooltip__label { max-width: none; }

Relevant information

Issue Analytics

State:
Created 4 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

asudohcommented, Sep 4, 2019

OK if you select the (pseudo) element in question and go to Computed tab, you can see width is equal to max-width. If you hover-over the width, and click on the right-arrow icon (with circle), you’ll see the style rule dictating width. If you uncheck all the rules setting width there and change max-width, you’ll get your max-width in effect. Hope this helps!

0reactions

asudohcommented, Dec 2, 2019

OK do you want to go to https://codesandbox.io/s/fragrant-morning-267l5, right-click the tooltip trigger button and select Inspect, right-click on the parent <button> and select Force state - :hover, select <span class="bx--assistive-text" id="icon-tooltip-20"> and add max-width: none; width: 640px to element.style section?

Top Results From Across the Web

Tooltip MaxWidth and spacing between Tooltip Icon and Tooltip ...

I'd like to set a maxwidth property for my tooltips so it forces the contents to wrap. I don't want tooltips that extend...

OpenSpan Studio | Using the ShowTooltip Method

This parameter determines to which corner of the control's rectangle the ToolTip is attached. You can select Bottom Left, Bottom Right or Top...

Tooltip - Icon Trigger ⋅ Storybook - CMS Design System

Name Description Control className Classes applied to the tooltip trigger. string ds‑c‑tooltip__trigger‑icon children* Tooltip trigger content. ReactNode ‑ inversed boolean Set boolean

Standard tooltip - Carbon Design System

Container, max-width, 288 / 18, –. padding, 16 / 1, $spacing-05 ... On mobile, tooltips can only appear below the tooltip icon.

React Tooltip component - Material UI - MUI

Tooltips display informative text when users hover over, focus on, or tap an element.