qtip will not disappear when i will click the another qtip - javascript

I used the qtip2 jquery plugin. The first qtip will appear when i will click the menu.the second qtip will appear when the mouse enter the first qtip. I set the first qtip is disappear when i will click the outside of the first qtip.But first qtip will not disappear when i will click the second qtip.
first Qtip:
hide = {
fixed: true,
delay: 300,
}
Actual result:first qtip is disappear when i will click the outside of the first qtip and click the second qtip itself.
Expected Result:first qtip will disappear when i will click the outside of the first qtip. but first qtip will not disappear when i will click the second qtip.
Note:The second qtip is fully placed the outside of the first qtip.
my code is:
_this.qtip({
style: {
classes: 'Details',
tip: {
corner: 'right center'
}
},
content:{
text:"HAI"
},
show: {
ready: true
},
hide: {
fixed: true,
when: 'unfocus',
},
position: {
my: 'right center',
at: 'center left',
adjust: {
x: -8,
y: 0
}
},
events: {
render: function(event, api){
$(this, api.elements.content).on("click", function(){
$('.tip-studio-right-menu').qtip("show");
});
},
hide: function(event, api){
api.destroy();
}
}
});

Related

qtip tooltip postion is not working in mobile

I am using Qtip Tooltip in jquery mobile, it is working fine in desktop and ipad, but in mobile device it's position is not working correctly.
Here is my script:
$('[data-tooltip!=""]').qtip({
content: {
attr: 'data-tooltip',
button: true// Tell qTip2 to look inside this attr for its content
},
position: {
my: 'bottom center', at: "top center",
adjust: {
y: 0
},
viewport: $(window)
},
show: {
event: 'click',
},
hide: {
event: false,
fixed: true
},
style: {
classes: 'qtip-bootstrap'
}
});
}
Am I doing something wrong?

how to keep popover visible when i hover on the popover in full calendar?

I have full calendar with some events. I have binded events from a json file. When i mouse hover on the particular event in the calendar it will show a popover. But when i move my mouse to the popover, the popover disappears. How to keep the popover visible when i move my mouse into the popover ? i have gone through other examples but didn't worked for me.
popover bootstap
link 2
code :
$('#calendar').fullCalendar({
//$.fn.popover.defaults.container = 'body';
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
contentHeight: 300,
height: 200 ,
eventRender: function(event, element) {
element.popover({
title: event.title1,
placement: 'auto',
html: true,
trigger: 'hover',
animation:'true',
content: event.msg,
container: 'body'
});
$('body').on('click', function(e) {
if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
element.popover('hide');
});
},
events: eventData
});
}
});
I don't know if can be an acceptable solution for you, but as alternative you can consider to 'toggle' popover on eventMouseover:
eventMouseover: function (event, jsEvent) {
$(this).popover({
title: event.name,
placement: 'right',
trigger: 'manual',
content: 'foo',
container: '#calendar'
}).popover('toggle');
}
In this way popover stays on top until you re-hover on event (Bootstrap v3.3.2, FullCalendar v2.6.1).

jQuery qTip and FullCalendar with agendaWeek as view

I am making a website that anyone can embed our calendar using iFrame. That calendar is using FullCalendar and qTip.
I am using FullCalendar with a default view of agendaWeek, the problem with that is when I click on an event the qtip appears, but when I scroll down, the qtip popup position is like fixed. It is very difficult to explain so here's the jsfiddle
Here's my code:
$("#calendar").fullCalendar({
defaultView: 'agendaWeek',
allDayDefault: false,
allDaySlot: false,
columnFormat:{
week: 'ddd dS'
},
events:{
url:"http://<?=$rootUrl;?>/studios/fetch_event_calendar_public/",
data:{
id:"<?=$studio_id;?>",
}
},
eventRender: function(event,element,view){
... ... ... ..
jQuery(element).qtip({ // Grab some elements to apply the tooltip to
id: 'calendar',
content: {
text: html,
button: 'Close',
title: 'Event Details',
},
style: 'qtip-light',
position: {
my: 'bottom center',
at: 'top center'
},
show:{
event:'click',
},
hide:{
event: 'unfocus'
},
});
},
windowResize: function( view ) {
calendar.fullCalendar('option', 'height', $(window).height() - 40);
}
});
So what I want here is that when the fullcalendar is scrolled down or up, the qtip should not have a position of fixed, it should just stay where the event is.
Your help will be greatly appreciated! Thanks!

QTip show my ajax content before downloading all the content

I am using QTip in my project and I have a very frustrating problem.
I have a page which contains around 20 elements. while standing over them, qtip generate an ajax request and get additional details on these elements while showing them in a qtip.
The problem is that it seems the qtip show the tip before downloading all the content of the additional page and causing weird artifacts. This happen the first time for each additional content. second time it shows the tip there is no problem.
Here is how I am calling qtip :
$(".challenge_button").each(function (index, domEle)
{
$(domEle).qtip({
content: {
url: '/main/challenge_get_info/' + $(this).data("challenge-id") +'/'
},
position: {
adjust: { x: -50, y: -10, screen: true },
corner: {
target: 'bottomRight',
tooltip: 'topLeft'
}
},
style: {
name: $(this).data("state"),
width: {
max: 500,
min: 370
},
tip: true
},
show: {
ready: false,
delay: 500,
effect:
{type : 'fade', length : 400 }
}
});
});

How do I access the triggering element using QTip?

I have a QTip assigned to an element as follows:
$('#myDiv').qtip({
show: { when: { event: 'click', } },
hide: { when: { event: 'unfocus' } },
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: 'center',
tip: true, // Give it a speech bubble tip with automatic corner detection
name: 'red' // Style it according to the preset 'cream' style
},
position: {
corner: {
tooltip: 'topMiddle', // Use the corner...
target: 'bottomMiddle' // ...and opposite corner
}
},
content: {
text: self.parent('.qtip').html(),
title: { text: 'My Title' }
},
});
Under 'text' in 'content', I am trying to access the innerHTML of the element that triggered this QTip to appear after being clicked on.
However, my current means of self.parent('.qtip').html(), as displayed above, is not working.
What is the standard way to do this? Thanks.
I later found the solution to this question.
To access properties of the element that triggered the QTip, one must structure the code in this way:
$("#container a").each(function() {
$(this).qtip({ // QTip code });
});
That way, one can use $(this) to access data such as innerHTML of the element that triggered the QTip.
Maybe you could set it before:
var text = $('#myDiv').text();
And use it inside the object:
text: text,

Categories