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
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
I'm using dojo menubar and I want the submenus to pop-up onmouseover and disappear onmouseout.
Right now the hiding and showing behavior is based on a click.
Is there anyway to get it to hover on mouseover, stop hovering on mouseout?
I found that a javascript click() on the menu item will start the hover behavior, and another javascript click will end it, so I could add an onmouseover and onmouseout listener to each menubar item as a workaround, but maybe someone knows of an easier way to get the same behavior by changing some dijit settings?
The documentation says this but I'm not sure how to use it.
The Menu/MenuBar domNode has a dijitMenuPassive/dijitMenuActive class so that CSS rules for hover can be customized based on whether or not the menu has focus.
I tried to add class="dijitMenuActive" but didn't notice any changes.
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 am using v-select (Vuetify) as a dropdown component. When I click the dropdown to expand the option, it does but it also has a blinking cursor on the input line for the ability type and search the dropdown options if you don't want to scroll through them. The issue is that this is automatically triggering the iOS keyboard to come up and it's covering half the screen.
I tried passing the prop :disabled=true but this just prevents the dropdown from even expanding. Is there anyways to disable this without disabling the dropdown functionality?
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.