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
Related
I am using http://bootstraptour.com/ to highlight features of my application.
I would like to highlight a dropdown and it's contents as a single step in the tour.
I have the following code which highlights the drop-down button and opens the dropdown, but I cannot get it to highlight the drop-down content
var tour = new Tour({
backdrop: true,
debug: true,
storage: false,
steps: [{
element: "#step1",
title: "Settings",
content: "Content of settings",
placement: "right",
}, {
element: "#dropdownMenu1",
title: "Title of my step",
content: "Content of my step",
placement: "right",
onShown: function () {
$("#dropdownMenu1").click();
}
}]
});
Any ideas how to highlight the actual dropdown as well?.I created a jsfiddle,any help would be appreciated.
Set the dropdown button to the same width as the dropdown .
Then add $(".dropdown-menu").css("z-index", "1101"); to
onShown: function(){
$("#dropdownMenu1").click();
$(".dropdown-menu").css("z-index", "1101");
}
you just need to set the z-index via javascript and donot use .click use .trigger() instead it is faster than .click your code should look like this
See Fiddle
$(document).ready(function () {
// Instance the tour
var tour = new Tour({
backdrop: true,
debug: true,
storage: false,
steps: [{
element: "#step1",
title: "Settings",
content: "Content of settings",
placement: "right",
}, {
element: "#dropdownMenu1",
title: "Title of my step",
content: "Content of my step",
placement: "right",
onShown: function () {
$("#dropdownMenu1").trigger('click');
$("#step4").css({
zIndex: 10000
})
}
}]
});
if (tour.ended()) {
tour.restart();
} else {
tour.init();
tour.start(true);
}
});
Use element: "#dropdown" insted of element: "#dropdownMenu1" and fix popover position...
I'm trying to make tooltip with image content always show on page load but there is if condition that make the tooltip will appear with different image.
The setup is as follows:
<script type="text/javascript">
$(document).ready(function() {
var warna = "";
if(warna=="1")
{
{$('area').qtip({
content: {
text: '<img src="dist/img/Green-Circle-Button-90786.gif" height="20" width="20"/>'
},
position: {
my: 'bottom center',
at: 'top center'
},
style: {
classes: 'qtip-tipsy'
},
show: {
solo: false,
ready: true, // Show when ready (page load)
}
},
hide: {
event: false
}
});
}
else
{
$('area').qtip({
content: {
text: '<img src="dist/img/Red-Circle-Button-90782.gif" height="20" width="20"/>'
},
position: {
my: 'bottom center',
at: 'top center'
},
style: {
classes: 'qtip-tipsy'
},
show: {
solo: false,
ready: true // Show when ready (page load)
},
hide: {
event: false
}
});
}
});
The problem is, tooltip always appear in else condition even value of warna == 1. Is there any solution?
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
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.
I'm trying to use qtip and create an embedded form that are being displayed in the qtip. When I'm trying to create a submit event to my form nothing happens. I'm using jquery 1.7 and the latest qtip version.
I have tried to use examples from http://craigsworks.com/projects/qtip2/demos/ but their demos won´t work for me. Please take a look at my code and tell me if I'm doing something wrong.
Thanks in advance!
$("#addNews").qtip({
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
},
adjust: { x: 0, y: 0 }
},
show: {
when: { event: 'click' },
solo: true
},
hide: {
fixed: true,
when: { event: 'unfocus' }
},
content: {
text: '<form id="frmAddNews"><div class="inputWrap left"><div class="label">Rubrik</div><input type="text" id="" name="" class="inputText" value="" /></div><div class="inputWrap left"><div class="labelTextarea">Meddelande</div><textarea id="" name="" class="inputTextarea" value=""></textarea></div><div class="submit_container"><input type="submit" value="Lägg till nyhet" /></div><div style="clear:both"></div></form>',
},
style: {
border: {
width: 5,
radius: 2,
color: '#e1e1e1'
},
width: 350,
background: '#FFF',
padding: 15,
tip: true, // Give it a speech bubble tip with automatic corner detection
name: 'cream' // Style it according to the preset 'cream' style
},
events: {
render: function(event, api) {
$('form', this).bind('submit', function(event) {
event.preventDefault();
console.log("hej");
});
}
},
});
I had a quick play and I got it to work if I set the tooltip to display modally.
i.e. have your show option object as:
show: {
event: 'click', // Show it on click...
modal: {
on: true,
// Don't let users exit the modal in any way
blur: false, escape: false
}
},
The jsFiddle I was using to play around with.