I'm trying to use Vue ToolTip in my project. I can successfully get it to work on my page, however, it doesn't work on my modal pop up page.
I've created a fiddle here: https://jsfiddle.net/bkw28n9h/
In this fiddle there is a Tooltip text on the page which shows up tooltip on hover. However, there is also a tool tip on the modal popup can comes up when clicking on any list item. The tooltip on the modal pop up does not show up on hover. Why is that?
I add the tooltip directive like this:
Vue.use(vueDirectiveTooltip);
Do I need to specifically add it to the modal component? If so, how do I do that?
Add to your style this:
.h-tooltip {
z-index: 99999!important;
}
The tooltip is being covered by your modal.
Related
How can I auto close ionic popover when not hover the button? you can test the hover button here >>>
Test here updated
<ion-button id="hover-trigger">Hover Over Me</ion-button>
<ion-popover trigger="hover-trigger" trigger-action="hover">
<ion-content class="ion-padding">Hello World!</ion-content>
</ion-popover>
The problem here is that popover, like the name suggests, does pop over the whole website. So even if you would use Vues #mouseout-event to close the popover it would close immediately. Therefore there is no satisfying solution to this with <ion-popover> without restyling the whole component.
Alternatively Ionics toastController could be used to achieve a similar result but with the expected hover effect. We can use #mouseover and #mouseout to handle the hover events.
#mouseover: create an toast and present it.
#mouseout: dismiss the presented toast.
Here is an stackblitz example
How do I use a "modal" element in #Dittofi. When I add the element it covers the entire page and I cannot access elements underneed.
When you add the modal box, you need to select the box marked "Modal" in the breadcrumb trial at the bottom of the page.
Then you can select the modal settings box to either show or hide the modal box.
Let me know if that works for you?
I have vuetify tooltip tht contains a button.
The problem is that the tooltip disappears before I can click on the button.
How can I make the content of the tooltip cliquable.
you can use close-delay prop to make the tooltip stay open for a longer time but I assume that it's contents still won't be clickable because of some z-index issue.
for a clickable content on hover you can use v-menu like this:
menu on hover
I am using react-native-modal. I am using modal's overlay, and the button which opens up modal, changes to cross button, but it stays behind the overlay of modal. I want that button to be on top of modal when modal is visible. I have already tried zIndex with the button but it didn't work. Need help with this. Thanks in advance.
Something like this but with modal overlay:
The Modal component of react native traps the focus inside the modal content while visible. The only way to capture a click on the button is to display another copy of it inside the Modal component. If you manage to display it at the same position, the user won't see that it's another button.
I am having issue with parallax/smooth-scolling and mouse wheel scrolling of Bootstrap modal popup windows.
The Bootstrap modal popup appears when user clicks "Learn More" button.
The modal popup window have the scrollbar. The issue is that user is not able to scroll using mouse wheel because that event is intercepted by parallax/smooth-scolling script.
I am not able to insert code here because the amount of code is too big.
The issue can be reproduced on this website.
Is it possible to solve this issue with adding custom javascript to the website?
I think the issue stems from adding parallax-3d to the body tag which is adding an onscroll event listener to your popups. I can see this from inspecting the events for the popup elements in developer tools.
I would suggest adding parallax-3d to main-container.
<div class="main-container parallax-3d">
Edit: Ok, so the parallax-3d library adds for all elements in the body, irrespective of placement.
I just removed the scroll events for the modals and it works.
Try this to remove scroll events.
$('.foundry_modal').unbind('scroll');