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.

🐛 Bug - TextInput in TextInput.Group is positioned on top of tooltips

See original GitHub issue

Forma 36 bug report

Summary

If I add a TextInput and a CopyButton with a tooltip in a TextInput.Group, the input is positioned on top of the tooltip:

The only way to get around it is to set usePortal on the Tooltip, but there are situations where this is not great, such as when the tooltip is placed so close to the edge of the bounding box that using a portal would create overflow.

Issue Analytics

State:
Created 2 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

massaocommented, Mar 7, 2022

Hey @denkristoffer the cause of this one is because when the input is disabled, invalid or focused it has a higher z-index than the other elements, so the glow of the focus or incorrect is always upfront. So this causes other problems, as if the user has the input selected, and hover on the button, the tooltip will also be behind it, and if we increase the z-index of the tooltip, the glow will be cut, here for example:

I will create a PR(#1935) to only have this behaviour of increasing z-index only when the field is focused instead, but I think it would be worth for the designers to take a look to see if we can have a different design that wouldn’t cause this problem with parts of elements being overlapped, maybe not having the glow, or always having a spacing between elements, don’t know. cc @fabe @domarku

0reactions

denkristoffercommented, Mar 9, 2022

Looks like we’ve lost the error border in groups with this fix: https://www.chromatic.com/test?appId=5fd1dda724cc620021ace8c5&id=62289dd43214f9003aaff9aa

Top Results From Across the Web

Tooltip inside TextInput label is not working. Material-UI + React

Problem : When hovering over the (?) icon tooltip does not appear. I have tried coding the input in 2 different ways using...

Tooltips - Bootstrap

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

How to add tooltips to lightning:input components?

I found documentation for a lightning:tooltip tag, but using it in a component throws a no-such-component error. I can follow the SLDS ...

Controlling tooltips & pop-up menus with components in React

Use compound components to control tooltips and pop-up menus in ... This API creates a clone of the input and returns a new...

Input - Lightning Design System

About Inputs#. You can style the HTML <input> element to align with the Salesforce brand by using the .slds-input class on the <input>...