I can't click a button because of overlapping padding

user_18326182 0
Viewed 59

I am making tooltip using antd library. I needed to override some styles and now I have a problem.

I can't click on children because of overlapping padding of tooltip. I tried set z-index but it does not helps

I do not think pasting the code is a good idea because antd library add some extra styles and my code will not be reliable enough

Here is link to codesandbox: Try to click on button.

https://codesandbox.io/s/colorful-tooltip-antd-4-21-0-forked-0g7we8?file=/Tooltip.js

Question: How should I style this children to be able to click on it

css html
2 Answers

The solution is to increase the z-index, your button will be able to be clicked after it increases like so:

body {
  padding: 100px;
}
button {
  z-index: 1000000;
}

user_136212430

There's padding-bottom being set to the tooltip by the .ant-tooltip-placement-top class. Add that class to your tooltip.js so you can override it and set the padding-bottom to 0px and you won't have to worry about it.

.ant-tooltip-placement-top { padding-bottom: 0; }

enter image description here

user_85650100
Related