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/
Related
I have succesfully defined a popup for a clickable link element:
The element:
`Alerts Page`
The script which triggers my popup (note the commented lines!)
$('[data-tcs]')
.popup({
// (default as in example provided on the S-UI, works well)
// popup : $('#popup-1'),
// (attempt 1, doesn't work)
// popup : $(this).data('tcs'),
// (attempt 2, doesn't work)
popup : $(this).attr('data-tcs'),
on : 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
The popup itself (irrelevant):
<div class="ui popup" id="popup-1">
<h3>TANJ!</h3>
</div>
TO DO
Now the popup works well ONLY when the ID of target content is pointed directly, but...
I am about to put about 10 more popups and I want to use the same script to trigger them.
How I can point to the proper popup depending on the value of data-tcs attribute?
My attempts were friutless.
Thx for all help.
The docs are here:
http://semantic-ui.com/modules/popup.html#/examples
Whenever you need to pass instance specific data to any plugin options the easiest way is to wrap the initialization in an each loop
Then the each loop will expose the instance as this.
When you are trying to use this currently it is the window not the element
$('[data-tcs]').each(function() {
var $el = $(this);
$el.popup({
popup: $el.attr('data-tcs'),
on: 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
});
I'm trying to make a cycle div. The wanted final effect is : being able to click on div1 to see div 2. Being able to click div 2 to see div 1 again. Being able to also do this with only keyboard ==> this is done and working.
But the second part of my goal is giving my problems.
Basically I want this : when I hover div1, the slide go to div2. But it has to stop sliding immediately. It must go back to div 1 when the hover is ended.
Here is what I tried but doesnt work :
$(document).ready(function() {
$('#s1').cycle({
fx: 'slideY',
speed: 300,
next: '#s1',
timeout: 0,
after: function (curr, next) {
$(next).find('.goto').focus();
}
});
var cycleConfigured = false;
$('#s1').hover(
function() {
if(cycleConfigured)
$(this).cycle('resume');
else
{
$(this).cycle({
fx: 'fade',
speed: 600,
timeout: 300,
slideResize: false,
pause: 0,
after: function() {
$(this).cycle('pause');
}
});
cycleConfigured = true;
}
},
function(){
$(this).cycle('pause');
}
).trigger('hover');
});
jsfiddle http://jsfiddle.net/gy8p5ewv/3/
basically as you can see, when I hover the div, it starts sliding and I cant stop it.
To sump up, here is the wanted effect I cant reach :
on hover container div > go div 2 permanently
on leaving hover container div > go back to div 1 permanently
documentation : http://jquery.malsup.com/cycle/options.html
Instead of getting it complicated, just replace the hover callback with a trigger like this :
$('#s1').hover(function () {
// Trigger a click.
$('#Goto2').click();
});
Working fiddle
When we hover on #s1 we want the div to behave as if #Goto2 was clicked, and switch the slides.
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)
},
I'm trying to adapt Gaya Design's Animated Tabbed Content http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/ for a navigation menu. I want to have the background verting back to the first tab on mouseout but can't seem to get that working. Below is the Javascript for moving background function:
var TabbedContent = {
init: function() {
$(".tab_item").mouseover(function() {
var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 300
});
TabbedContent.slideContent($(this));
});
},
}
$(document).ready(function() {
TabbedContent.init();
});
And here is a link to what I'm trying to achieve. Link
Any help on how to get the background to revert to tab one on mouseout will be very much appreciated!
Thanks
What about triggeting the mouseover event of the first item:
$('.tabs').mouseout(function(){
$(this).find('.tab_item:first').mouseover();
});
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);