I am using ant design with react for my project
when I am using the tooltip component, and I hover over the element, the tooltip appears and the scroll bar for a half-second and then disappears.
as you can see in this video https://youtu.be/Tyg61JVDgRc
anybody knows why?
at the moment the problem is only with ant design tooltip component, and is bugging and not following the position : 'fixed' so handing it to overlayStyle prop manually will fix the problem like <Tooltip overlayStyle={{position:'fixed'}}/>, I hope this helps. if youre still in trouble pass destroyTooltipOnHide propery
Related
I am using react-full-screen node package to make a full screen component, however modals, popovers, and drawers do not work.
Could you please help me make a working modal within my full screen component?
Are you sure it doesn't work ? maybe your modals are well displayed but behind your fullscreen component (did you use devtool's element inspector to check the html / css to see if your modal was here ?).
You might need to enrich your modal's css to make it visible ahead of fullscreen component, a mere z-index: 2 on the modal' style could help ?
Im using react-simple-maps with react-tooltip
Looks like the hover works fine, but I try to click on a link I've added on the tooltip but before I can get to the tooltip, it disappears and I can't access the content with my mouse.
is this possible?
Depending on what your implementation specifically looks like, I think the delayHide property is what you're looking for. It defines the delay after the hover event ends until the tooltip disappears, in milliseconds.
<ReactTooltip delayHide={1000} />
I'm trying to have a simple bar in which I will put a logo, and below, a drawer. The problem is when I open the drawer, the simple bar moves with it. Besides, I can see the logo text is hidden by drawer.
I've tried to add zIndex to the simpleBar but it doesn't work. I'm really not familiar with react and material ui so don't see how to fix my problem.
Here's my codesandbox https://codesandbox.io/embed/sharp-browser-lsolr?fontsize=14 , if anyone can help.
I'm sorry, when clicking on my codesandbox, you'll see an error I don't get 'cause my code comes from material-ui and I don't see what the problem is.. Just click on the cross to close it.
Many thanks in advance !
Try this: https://codesandbox.io/s/sad-matsumoto-c84r8
The SimpleAppBar component was removed, and the MiniDrawer component which already has an AppBar has been modified so that everything looks right and you can put your logo where you want it.
I'm trying to set a downshift component inside a dialog body component, playing with zIndex doesn't work, and suggestion always appears underneath.
Is there a way to show downshift suggestion on top while using with a dialog ?
Here's a dialog with a downshift component inside (taping "a" inside "search a country" show the hidden suggestion) as an example of this issue :
https://codesandbox.io/s/q3lllwr08j
I also faced a similar problem. Hope this is what you are looking for: codeSandboxLink
I just added a class and added it to Dialog and DialogContent. The class name is dialogPaper. Look for the class in styles.
The class is:
dialogPaper: {
overflow: "visible"
}
Find an easy way to fix by just setting dropdown css by position: fixed
I guess the problem is not with the Z-Index. It's just not enough space to show the content of the dialog. I tried this solution with wrapping the content of the dialog with Paper element and set the height and width
The documentation for the react-bootstrap overlay trigger says that the overlay prop can be an element or text. However, whenever I pass it something other than a "Tooltip" component it doesn't work. In fact, if you modify their code example on the website linked below to be just a div instead of a Tooltip or a string, it doesn't work on their site either. Does it have to be passed a Tooltip?
https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger
Easiest thing to pass is a Tooltip or a Popover.
You could also pass it something else, but then you have to wrap it in an Overlay instead of an OverlayTrigger. See the react-bootstrap docs on Custom Overlays for more specific examples.