I am using qTip: http://craigsworks.com/projects/qtip2 and my current problem is that when I hover the tooltip it disappears (because the target was mouseleave/mouseout).
Is there a way to make it stay visible when I hover the tooltip? I positioned the tooltip so that its right under the target so there are zero empty space between the target and the tooltip.
Use fixed: http://craigsworks.com/projects/qtip2/docs/hide/#fixed
You may wish to add a delay as well before the tooltip disappears, in case there's some distance between your triggering element and the tooltip.
e.g.
$('.moreinfo').qtip({
content: {
text: $('<p>This is a tooltip.</p>')
},
show: {
effect: function() { $(this).fadeIn(250); }
},
hide: {
delay: 200,
fixed: true, // <--- add this
effect: function() { $(this).fadeOut(250); }
},
style: {
classes: 'ui-tooltip-blue ui-tooltip-shadow ui-tooltip-rounded'
}
});
Hope it helps.
Use fixed: true as well as leave: false
The problem you might be having is that when you leave the qtip target it is hiding.
For some reason, using fixed:true alone didn't work for me. Instead, I had to use these configurations (v3.0.3):
hide: {
fixed: true,
delay:90,
},
position: {
viewport: $(window)
},
Related
I am using TippyJS to show a tooltip but for some reason when first click the tooltip it is positioned way too much to the right, and if you have a small screen it will even go outside of view.
Example:
While after I scroll a bit, or resize the page it gets positioned correctly.
Example:
What could be causing this behaviour?
Example codepen (shopping cart is empty but still has the same behaviour when clicking/scrolling): https://codepen.io/twan2020/pen/ZEBvYXv
I've tried setting boundary:viewport in the options like this:
$( ".carttip" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
animation: 'scale-subtle',
maxWidth: 400,
boundary: 'viewport',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
},
onShow(instance) {
refreshcart(true);
}
});
});
But this changed nothing.
As Stavros Angelis points out, the tippy instance positioning is already calculated when the content is applied. To reposition the tooltip when the ajax call resolves, you could pass the tippy instance into the refreshcart() function and then accessing the popper instance inside it to refresh the tooltip:
function refreshcart(force, tippyInstance) {
$.ajax({
type: 'post',
url: 'includes/refreshcart.php',
data: ({}),
success: function(data){
$('body #headercart').empty().append(data);
tippyInstance.popperInstance.update(); // Here, the tippy positioning is updated
}
});
}
// other code...
$( ".carttip" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
animation: 'scale-subtle',
maxWidth: 400,
boundary: 'viewport', // This has been dropped in tippy#6
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
},
onShow(instance) {
refreshcart(true, instance);
}
});
});
As for the boundary: seems like tippy#6 (which your example uses) has dropped this prop, so it can be removed here.
More on the popper instance here: https://github.com/atomiks/tippyjs/issues/191
The problem comes from the onShow function. The way your code works is that first you open the popup, then you do an ajax call and fetch some html to append in the tippy box. At that point the tippy box has already rendered and calculated the position of the box with a 0 width and 0 height. Then the ajax call completes and the container changes dimensions and ends up outside the viewport.
The tippyjs documentation covers that here with a very clean example: https://atomiks.github.io/tippyjs/v6/ajax/
I am trying to show tooltips in a mouseover event in cytoscape.js using qtip. The tooltip is displayed when the mouse is over a node in the graph, however, it is positioned at the top-left corner of the graph, instead of showing at the bottom of the node. Here is the code to display the graph:
this.cyto = cytoscape({
container: document.getElementById("graph"),
layout: {
name: 'spread',
minDist: 200
},
elements: this.graph.elements,
style: this.cy_style
});
Add here is the code I am using to add the qtip
this.cyto.nodes().forEach(function (element) {
var nodeName = element.data("name");
if (nodeName) {
element.qtip({
content: {
text: nodeName
},
position: {
my: 'bottom center',
at: 'bottom center',
adjust: {
y: 50,
mouse: false
}
},
show: {
event: 'mouseover'
},
hide: {
event: 'click mouseout'
},
style: {
classes: 'qtip-bootstrap'
}
});
}
});
Here is a screenshot showing how the tooltip is currently being displayed:
As you can see in the image above, the tooltip displays at the top left corner of the graph. However, I want to display the tooltip like this:
How can I make the tool-tip display at the proper position? What am I doing wrong here?
It looks like you're missing the qtip stylesheet, which I believe qtip needs to work.
You can refer to the demo code for a working example: http://js.cytoscape.org/demos/qtip-extension/
I'm using qTip2 for tooltips. I want to have this tooltip hiding behavior:
- toopltip hides when I click close button on title (button: true)
- tooltip hides when I click elsewhere on the page (event: 'unfocus')
- tooltip hides when I don't interact with it for 3 seconds (inactive: 3000), but only if my mouse cursor is not on the tooltip (fixed: true)
Hiding when close button is pressed is fine:
content: {
title: {
button: true
}
}
Hiding when unfocus is also ok:
hide: {
event: 'unfocus'
}
Hiding when I don't interact with it is still no problem:
hide: {
event: 'unfocus',
inactive: 3000
}
Now I can close the tooltip by clicking elsewhere on the page, or on close button, or by not moving mouse over the tooltip for 3 seconds. But when my mouse is on tooltip and it doesn't move for 3 seconds, the tooltip is also closed - this is undesirable.
For staying visible when mousing onto tooltip I can use this:
hide: {
fixed: true,
delay: 3000
}
Now it closes when mouse is not on tooltip for 3 seconds. But not when I click elsewhere on the page. So let's combine unfocus and fixed:
hide: {
event: 'unfocus',
fixed: true,
delay: 3000
}
Now it will close when I click elsewhere on the page, but not after 3 seconds after leaving tooltip. So let's try adding inactive:
hide: {
event: 'unfocus',
inactive: 3000,
fixed: true,
delay: 3000
}
Now it will close when I click elsewhere on the page, also after 3 seconds after leaving the tooltip, but also after 3 seconds of inactivity when I'm on the tooltip.
How can I close tooltip when I click elsewhere on the page and after 3 seconds after leaving the tooltip, but not when I'm still on it?
I had a similar requirement and as xr280xr mentions, the only solution I see is to implement the 'unfocus' part yourself. So you end up with your configuration being:
$el.qtip({
content: {
title: {
button: true
}
},
hide: {
fixed: true,
delay: 3000
}
})
and then to implement the unfocus behaviour:
var api = $el.qtip('api');
$el.closest('html').on('mousedown touchstart', function(e) {
api.hide(e)
});
In a fiddle: http://jsfiddle.net/pvanb/n04qL8jg/
I have an object accordionOptions which mediates the behavior of an accordion object
on my page. It looks like:
var accordionOptions = {
icons: {
header: 'ui-icon-circle-arrows-e',
activeHeader: 'ui-icon-notice'
},
animate: {
easing: 'easeOutBounce',
duration: 1000
}
}
I'm using that object to determine the behavior of my accordion like so:
$('#accordion1').accordion({
icons: accordionOptions.icons,
animate: accordionOptions.animate
});
I have an anchor tag on my page that when clicked I intend for it to have the same animation as the accordion when a new panel is clicked:
$('#btnChange').click(function () {
$('#test').animate({
easing: accordionOptions.animate.easing
});
});
You can see in the fiddle here this doesn't work. I've tried several things, all were non-successes. How can I attach my desired behavior to the test div using my accordionOptions argument?
Using easing for .animate is slightly different than for .accordion -- you need to pass the duration and easing separately from what should be animated. You should set a height or whatever property it should animate.
$('#test').animate({ height: 100 }, accordionOptions.animate.duration, accordionOptions.animate.easing);
Or shorter syntax similar to how you were originally doing it:
$('#test').animate({ height: 100 }, accordionOptions.animate);
Updated fiddle: http://jsfiddle.net/C6Eax/1/
I am having a slight issue with Overlay (JQuery Tools) - what I need to do is allow people to click on another overlay from overlay.
The problem is that the overlay opens behind the already active overlay, which causes issues because I need it to load in front of the open overlay.
Does anyone know how I can load multiple overlay's but make sure the last overlay loads in-front?
This is the code I am using ...
/
/ select the overlay element - and "make it an overlay"
$("#overlay").overlay({
// custom top position
//top: 200,
// some mask tweaks suitable for facebox-looking dialogs
mask: {
// you might also consider a "transparent" color for the mask
color: '#fff',
// load mask a little faster
loadSpeed: 200,
// very transparent
opacity: 0.8
},
// disable this for modal dialog-type of overlays
closeOnClick: true,
// load it immediately after the construction
load: false,
oneInstance: false
});
// Modal on click
$("a[rel]").overlay({
// disable this for modal dialog-type of overlays
closeOnClick: true,
top: '3%',
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.8
},
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
},
oneInstance: false
});
I am using this to open the second overlay ..
Link
Thanks.
I had a similar problem and I solved it by setting the z-index property for all involved elements. Very important to realize here is that if you use a mask you need to set the z-index of that mask too!
For example:
$('#some_overlay_element').overlay({
mask: {
maskId: "defaultMask" ,
color: null ,
zIndex: 9001
},
effect: "apple",
zIndex: 9100
});
You can use this code to open multiply overlay, or overlay over overlay with different mask.
For Example:
//Global Variable//
var zindx=99999;
var mask_Zindex=99990;
//Code to open the Overlay//
$("yourDynamicID").overlay({
effect: 'apple',
oneInstance:false,
closeOnClick: false,
closeOnEsc: false,
zIndex: ++zindx,
api: true,
load: true,
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
},
onLoad: function(){
if($.mask.isLoaded()) {
//this is a second overlay, get old settings
oldMaskZ[counters] = $.mask.getConf().zIndex;
$oldMask[counters] = $.mask.getExposed();
$.mask.getConf().closeSpeed = 0;
$.mask.close();
counters++;
this.getOverlay().expose({
color: 'darkgrey',
zIndex: mask_Zindex,
closeOnClick: false,
closeOnEsc: false,
maskId: maskID,
loadSpeed: 0,
closeSpeed: 0
});
}else{
this.getOverlay().expose({
color: 'darkgrey',
zIndex: mask_Zindex,
maskId: maskID,
closeOnClick: false,
closeOnEsc: false
});
}
//Other onLoad functions
},
onClose: function(){
counters--;
// $.mask.close();
//re-expose previous overlay if there was one
if($oldMask[counters] == null){
$.mask.close();
}
}
});
I am having a different but similar problem and ran into the following potential solution:
http://sdevgame.wordpress.com/2011/01/26/modal-on-modal-with-jquery-tools/
I have not yet tried it.
Though this the question is not fresh - there may be some toolbox users out there with the same problem.
I'm using a very simple hack. Just wait for a milisecond allowing the overlay to be set up correctly then I'm changing the z-index. Simple as pie:
window.setTimeout(function(){
$("#YourSecondOverlayIdName").css("z-index", "11000");
},60);