🐛 Bug - TextInput in TextInput.Group is positioned on top of tooltips
See original GitHub issueForma 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:
![Screenshot 2022-02-07 at 13 03 34](https://user-images.githubusercontent.com/219017/152784933-6ce184b5-07c5-4785-a1e5-0ee3e40b352c.png)
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 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...
Read more >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.
Read more >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 ...
Read more >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...
Read more >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>...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hey @denkristoffer the cause of this one is because when the input is
![image](https://user-images.githubusercontent.com/1071799/157060694-ba8c5fc6-c353-44cf-b5fb-e49f4ed597e0.png)
disabled
,invalid
orfocused
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 @domarkuLooks like we’ve lost the error border in groups with this fix: https://www.chromatic.com/test?appId=5fd1dda724cc620021ace8c5&id=62289dd43214f9003aaff9aa