Develop Reference

jQuery qTip show/hide on keyboard clicks(Enter Key)

I am able to show/hide jQuery qTip on mouse click but
I want to show/hide the qTip on click of Enter key along with mouse clicks.
Can some one please help me on this.
$('.LoginUserProfile').qtip({
content: {
text: '<span class = "login_jobTitle" title = ' + UserJobTitle + '>' + UserJobTitle + '</span><br/>',
title: 'My Profile',
//button: 'Close'
},
show: {
solo: true,
click: true,
},
show: 'click',
hide: {
event: 'click unfocus'
},
position: {
my: 'top right', // Position my top left...
at: 'bottom left', // at the bottom right of...
viewport: $(window)
},
style: {
classes: 'qtip-tipsy profile-dropdown',
tip: false
},

Below is the answer.
var showUserProfile = true;
$('.LoginUserProfile').keyup(function (e) {
if (e.keyCode === 13) {
if (showUserProfile) {
$('.LoginUserProfile').qtip("show");
showUserProfile = false;
}
else {
$('.LoginUserProfile').qtip("hide");
showUserProfile = true;
}
}
});

Close jQuery UI dialog on overlay click

I want to close my modal when people click the overlay, normally u would use
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#dialog').dialog('close');
})
but i am loading my modal after i create it, so it would seem that the above code interferes with mine somehow.
this is my code so far.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can bind the event inside the open method
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
open: function(event, ui) { //added here
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
});
},
position: {
my: "center top",
at: "center top+30",
of: "body"
},
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});

Okay i found the problem.
i was trying to close the dialog before it was initialized.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
open: function () {
jQuery('.ui-widget-overlay').on('click', function () {
dialog.dialog('close');
});
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
this is the code i ended up with, and this works as intended.
so to summarize, put this code inside your dialog init.
open: function() {
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
})

Initialize qtip and immediately show on mouse position

I am trying to initialize a qTip on the click event and display it at the mouse position at the same time (with the same click). I've got so far as to requiring 2 clicks in order to display it, but I would like to make it possible with only 1: http://jsfiddle.net/vpysbc5y/4/
Any brilliant ideas? Thanks.
<div id="block" style="height: 200px; width: 200px; background: black;"></div>
<script>
$(document).ready(function () {
$('#block').on('click', function() {
$(this).qtip({
content: {
text: 'Hello, world!'
},
show: {
event: 'click',
},
hide: {
event: 'unfocus',
fixed: true
},
position: {
at: 'top center',
my: 'bottom center',
target: 'mouse',
adjust: {
mouse: false
}
},
});
});
});
</script>

The problem is that target: 'mouse' (probably) tries to infer the current mouse position. However, outside a click event, this is not possible. Since your qtip will be shown on ready rather than on click then it can't infer the mouse position on its own so you will need to forward it.
Your code should read:
$(document).ready(function () {
$('#block').on('click', function(e) {
$(this).qtip({
content: {
text: 'Hello, world!'
},
show: {
ready : true
},
hide: {
event: 'unfocus',
fixed: true
},
position: {
at: 'top center',
my: 'bottom center',
target: [ e.clientX, e.clientY ],
adjust: {
mouse: false
}
},
});
});
});
Example fiddle

Opening a QTip2 Modal Window from within a Javascript function

I'm using Qtip2 to create modal window with the code below:
$('a#my-link-id').qtip({
content: {
text: $('#my-modal-content'),
title: "My Modal Window Title",
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
This modal will be activated when I click on the link with id my-link-id.
However, I want to activate this modal using the OnClick feature in a link. So say I have the following link:
<a id="my-link-id" href="#" onClick="javascript:getModalWindow('my-link-id');return false;">Fire Modal</a>
And I have the following function:
window.getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
elem_link.qtip({
content: {
text: 'my content',
title: 'My Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
}).on('click', function(e){
e.preventDefault();
return false;
});
elem_link.trigger('click');
return false;
}
The above code does not work as I expect it to. What happens is the click gets triggered continously (not once) until my browser (Chrome) halts it with an 'Aw, Snap!' error. And also the modal does not get activated.
What do I need to do to get this to work?!

I solved this doing what you have below:
window._getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
var modal_init_bool = elem_link.data('modal_init');
switch(true)
{
case (modal_init_bool !== true):
elem_link.qtip({
content: {
text: 'Modal Window Content',
title: 'Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'modal',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
elem_link.data('modal_init', true);
break;
}
elem_link.trigger('modal');
return false;
}
I tried using 'click' instead of 'modal' but it just kept firing multiple times when I did that and I don't really understand why.

jquery qtip2 - multiple qtips for same target?

I am using the jquery qtip2 to create a mouseover qtip..here is the code:
$(document).ready(function() {
$("#optionalProdsImgPreview_1").qtip({
content: "<img src='http://mysite.com/myimg.jpg' width='100' height='150' />",
show: {
solo: true
},
hide: {
delay: 400,
fixed: true,
event: "mouseout"
},
style: {
tip: {
corner: "rightMiddle"
},
classes: "ui-widget-content"
},
position: {
adjust: {
x: -18,
y: 0
},
at: "left center",
my: "right center"
}
});
});
This basically opens an preview image when the mouse is over a the link such as this:
My great product here
Now what I want to do is open a different qtip when someone clicks on that link. Also the mouseover qtip should close as well. Do I just do that via jquery .click or should I do this via some other method or maybe qtip has some way of accomplishing this?
Thanks

Nevermind. I figured out the solution myself.
http://craigsworks.com/projects/qtip2/tutorials/advanced/#multi
Here is my full code:
$(document).ready(function() {
$("#optionalProdsImgPreview_1").qtip({
content: "<img src='http://mysite.com/myimg.jpg' width='100' height='150' />",
show: {
solo: true
},
hide: {
delay: 400,
fixed: true,
event: "mouseout"
},
style: {
tip: {
corner: "rightMiddle"
},
classes: "ui-widget-content"
},
position: {
adjust: {
x: -18,
y: 0
},
at: "left center",
my: "right center"
}
})
.removeData('qtip')
.qtip( $.extend({}, shared, {
content: "My New Content is HERE!"
}));
});

The solution may now have changed with the latest version of qTip2. In order to get multiple qTips to work on the same target I had to add the overwrite:false option to the second qtip.
http://qtip2.com/options#core.overwrite