Thanks, Craig, for all your great work!
I am having problems adding a click event to the qTip title. I want the qTip content to slideUp when I click the qTip title and then slideDown on the next click. I tried both the toggle and click events on the qTip title, using the onShow API. In addition, when I was investigating, I noticed that when I click on the target element to show the qTip, it appears that onShow is triggered twice for one click (Do I see that in the show API source code, onShow() called in afterShow() once and then again later?).
I tested in Firefox 2 and 3 and IE 7.
Any help/info would be appreciated.
JS Code
<html>
<head>
</head>
<body>
<h3>This example works as expected (jQuery only, no qTip).</h3>
<div id='parent'>
<div id='standard_title'>Title: <b>click me</b> to toggle content</div>
<div id='standard_content'>Here is the content.</div>
</div>
<h3>These examples do not work as I expect (jQuery + qTip).</h3>
<ul>
<li>A click on the tooltip title appears to happen twice, if I use the toggle event.</li>
<li><span id='qtip_toggle_event'><b>Click me</b> for a qtip (version 1)</span></li>
<li>And, a click on the tooltip title appears to happen twice (sometimes more), if I use the click event.</li>
<li><span id='qtip_click_event'><b>Click me</b> for a qtip (version 2)</span></li>
<li>Also, onShow appears to happen twice</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.qtip.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// ======================
jQuery('#standard_title').toggle(
function(event) {
alert('click');
jQuery('#standard_content').slideUp('normal');
},
function(event) {
alert('click');
jQuery('#standard_content').slideDown('normal');
}
);
// ======================
jQuery('#qtip_toggle_event').qtip({
content: {
text: 'This is the qTip content: version 1.',
title: {
text: 'qTip Title: click me to toggle content (using toggle event)'
}
},
show: 'click',
hide: 'click',
api: {
onShow: function() {
alert('onShow');
var self = this;
// hide/show the content by clicking on the title
// ----------------------------------------------
// version 1
jQuery(self.elements.title).toggle(
function(event) {
alert('click');
jQuery(self.elements.content).slideUp('normal');
},
function(event) {
alert('click');
jQuery(self.elements.content).slideDown('normal');
}
);
}
}
});
// ======================
jQuery('#qtip_click_event').qtip({
content: {
text: 'This is the qTip content: version 2.',
title: {
text: 'qTip Title: click me to toggle content (using click event)'
}
},
show: 'click',
hide: 'click',
api: {
onShow: function() {
alert('onShow');
var self = this;
// hide/show the content by clicking on the title
// ----------------------------------------------
// version 2
jQuery(self.elements.title).click(function() {
alert('click');
jQuery(self.elements.content).slideToggle('normal');
});
}
}
});
});
</script>
</body>
</html>
Thanks again.
Hi ivan,
First off thanks for the report about calling onShow and onHide twice! I hadn't noticed I'd left those in there, good catch! In regards to your problem, I'd recommend using onRender instead, as that way you're not assigning the toggle every time the tooltip shows:
That should fix your problem (just tested it).
Thanks, Craig. Using onRender works as advertised.
However, I discovered two new issues while using onRender.
1. In IE7, when I click the qTip title to slideUp the qTip content, the styling of the qTip 'breaks' if the qTip title is one line.
2. It appears the title button (that hides the qTip) propagates the click event to the title itself. When you hide the qTip with that button, it hides the qTip and then toggles the qTip content. Therefore, if you reclick the target element to reshow the qTip, the state of the qTip content has been toggled. I'm looking for the behavior here to be the same as when you click the target element to hide/show the qTip: the state of the qTip content does not change.
Any suggestions? For the second issue, is there a simple way to stop the propagation (stopPropagation(), preventDefault()?) Thanks again.
JS Code
<html>
<head>
</head>
<body>
<ul>
<li>This version has a short qTip title.</li>
<li><span id='qtip_toggle_event'><b>Click me</b> for a qtip (version 1)</span></li>
<li>This version has a longer qTip title.</li>
<li><span id='qtip_click_event'><b>Click me</b> for a qtip (version 2)</span></li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.qtip.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// ======================
jQuery('#qtip_toggle_event').qtip({
content: {
text: 'This is the qTip content: version 1.',
title: {
text: 'qTip Title',
button: 'X'
}
},
show: 'click',
hide: 'click',
style: {
name: 'cream',
width: 200,
padding: 5,
border: {
width: 2,
radius: 4,
color: '#6699CC'
},
tip: 'topLeft'
},
api: {
onRender: function() {
var self = this;
// hide/show the content by clicking on the title
// ----------------------------------------------
// version 1
jQuery(self.elements.title).toggle(
function(event) {
jQuery(self.elements.content).slideUp('normal');
},
function(event) {
jQuery(self.elements.content).slideDown('normal');
}
);
}
}
});
// ======================
jQuery('#qtip_click_event').qtip({
content: {
text: 'This is the qTip content: version 2.',
title: {
text: 'qTip Title: This one should be more than 1 line long',
button: 'X'
}
},
show: 'click',
hide: 'click',
style: {
name: 'cream',
width: 200,
padding: 5,
border: {
width: 2,
radius: 4,
color: '#6699CC'
},
tip: 'topLeft'
},
api: {
onRender: function() {
var self = this;
// hide/show the content by clicking on the title
// ----------------------------------------------
// version 2
jQuery(self.elements.title).click(function() {
jQuery(self.elements.content).slideToggle('normal');
});
}
}
});
});
</script>
</body>
</html>
Ivan,
Most callback functions are passed the event parameter by default, so if you include it in the onShow function declaration like so:
You can use stopImmediatePropogation() to stop the other events firing (in theory). Try it out and get back to me!
Thanks again. I stopped the propagation in the onHide callback (that's what you meant, right?). It works in FF2 and FF3. Of course, it did not work in IE7.
To make it work in IE7 without errors, I had to make the following changes:
1. don't stop the propagation for events on the target element in the onHide callback (i.e. in this case, stop propagation only for the title button click event).
JS Code
onHide: function(event) {
var self = this;
if (event.currentTarget !== jQuery(self.elements.target).get(0)) {
event.stopPropagation();
}
}
2. make an edit to the qtip source code. Change line 197 in beta4 from
JS Code
function afterHide(){ self.onHide.call(self, event); }
to
It appears what we discussed above about the two calls to onHide makes a difference here.
Note: for the second change, I also tested leaving afterHide as is and removing the second onHide callback (line 236) but it did not work for me.
Test examples:
JS Code
<html>
<head>
</head>
<body>
<ul>
<li>This version stops propagation for all onHide callbacks. It will report an error in IE7. It also won't continue to work until after the change to the qtip source code.</li>
<li><span id='qtip_both_events'><b>Click me</b> for a qtip (version 1)</span></li>
<li>This version stops propagation only for the title button click event. <b>This version will work with no errors in IE7 after the change to the qtip source code</b>.</li>
<li><span id='qtip_title_button_click_event'><b>Click me</b> for a qtip (version 2)</span></li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.qtip.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// ======================
jQuery('#qtip_both_events').qtip({
content: {
text: 'This is the qTip content: version 1.',
title: {
text: 'qTip Title',
button: 'X'
}
},
show: 'click',
hide: 'click',
style: {
name: 'cream',
width: 200,
padding: 5,
border: {
width: 2,
radius: 4,
color: '#6699CC'
},
tip: 'topLeft'
},
api: {
onRender: function() {
var self = this;
// hide/show the content by clicking on the title
jQuery(self.elements.title).click(function() {
jQuery(self.elements.content).slideToggle('normal');
});
},
onHide: function(event) {
// this version produces an error in IE7 (It also won't continue to work until after the change to the qtip source code)
event.stopPropagation();
}
}
});
// ======================
jQuery('#qtip_title_button_click_event').qtip({
content: {
text: 'This is the qTip content: version 2.',
title: {
text: 'qTip Title',
button: 'X'
}
},
show: 'click',
hide: 'click',
style: {
name: 'cream',
width: 200,
padding: 5,
border: {
width: 2,
radius: 4,
color: '#6699CC'
},
tip: 'topLeft'
},
api: {
onRender: function() {
var self = this;
// hide/show the content by clicking on the title
jQuery(self.elements.title).click(function() {
jQuery(self.elements.content).slideToggle('normal');
});
},
onHide: function(event) {
var self = this;
// event.target on the next line produces an error in IE7 (It also won't continue to work until after the change to the qtip source code)
if (event.currentTarget !== jQuery(self.elements.target).get(0)) {
// event.stopImmediatePropagation();
event.stopPropagation();
}
}
}
});
});
</script>
</body>
</html>
I just tried the test examples I submitted on Apr 21 with the latest version of qtip (rc2). They no longer work.
1. In Firefox, I get an error that "event has no properties" in my onHide callback. Therefore, testing for the event's currentTarget and even just stopping the propagation no longer works. I tested with both the as-is version of qtip rc2 and my edited version (see above).
2. In IE, I could not test the title button to 'hide' the qtip because it is no longer being shown. I found this to be the case with other examples as well.
Suggestions?
Also, let me know if it would help to submit a bug report.
Thanks again.
Hi ivan,
Thanks for pointing this out. It's actually a bug in the libraries button event binding which doesn't pass on the event as a parameter. I've fixed this in the latest branch revision.
Latest branch revision code:
http://bazaar.launchpad.net/~craig.craig...runk/files
I've also added in an extra element reference to the button as self.elements.button in the latest revision, so your code can be shortened down to this:
JS Code
$(document).ready(function()
{
$('#qtip_title_button_click_event').qtip({
content: {
text: 'This is the qTip content: version 2.',
title: {
text: 'qTip Title',
button: 'X'
}
},
show: 'click',
hide: 'click',
style: {
name: 'cream',
width: 200,
padding: 5,
border: {
width: 2,
radius: 4,
color: '#6699CC'
},
tip: 'topLeft'
},
api: {
onRender: function() {
var self = this;
// hide/show the content by clicking on the title
self.elements.title.click(function(event)
{
self.elements.content.slideToggle('normal');
});
self.elements.button.click(function(event){ event.stopImmediatePropagation(); })
}
}
});
});
Thanks. I successfully used qtip rev32 to fix the problem I saw in Firefox. I also successfully used self.elements.button (I noticed that what I had before in onHide no longer works. Is that right?).
However, two issues.
1. IE7 still does not show the title button with rev32. To make it work, I edited rev32 (starting from line 1397) from
JS Code
self.elements.button = $('<a href="#" style="float:right; position:relative;">')
.attr('href', '#')
.addClass(self.options.style.classes.button)
.html(self.options.content.title.button)
.prependTo(self.elements.title)
.click(function(event){ if(!self.status.disabled) self.hide(event) });
to
JS Code
self.elements.button = $(document.createElement('a'))
.attr('href', '#')
.css({ 'float': 'right', position: 'relative' })
.addClass(self.options.style.classes.button)
.html(self.options.content.title.button)
.prependTo(self.elements.title)
.click(function(event){ if(!self.status.disabled) self.hide(event) });
2. Some basic functionality broke between rc2 and rev32. The following example no longer works:
JS Code
<html>
<head>
</head>
<body>
<p><span class='qtip'><b>Click me</b> for a qtip</span></p>
<p>
<p><span class='qtip'><b>Click me</b> for a qtip</span></p>
<p>
<p><span class='qtip'><b>Click me</b> for a qtip</span></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.qtip.min.js"></script>
$(document).ready(function(){
$('.qtip').qtip({
content: {
text: 'This is the qTip content.',
title: {
text: 'qTip Title'
}
},
show: 'click',
hide: 'click'
});
});
</script>
</body>
</html>
Hi ivan,
I definitely would not recommend using a 'qtip' class for your elements which are going to be assigned tooltips, as it may interfere with the qtip script. This isn't such a problem with the latest branch revisions, as the selectors have been updated to make them more specific.
Thanks for pointing out the issue with rev32, this is now fixed and pushed to the branch in the newest revision. I've also incorporated part of the IE fix you posted. So upgrade and enjoy!
Thanks again, Craig.
Oops, I did not mean to use the qtip class. I can imagine it could cause a conflict. I will definitely avoid it in the future
rev34 fixes the second issue I mentioned in my last post. Thanks.
However, two issues.
1. I still have the problem in IE7 with the title button. In order for me to see the title button, I edited rev34 (lines 1426-1428) from:
JS Code
self.elements.button = $('<a href="#" style="float:right;>')
.attr('href', '#')
.css({ position: 'relative' })
to
JS Code
self.elements.button = $('<a>')
.attr('href', '#')
.css({ 'float': 'right', position: 'relative' })
2. My adding multiple qtips with different events to a single target no longer works. It worked in beta4.
JS Code
<html>
<head>
</head>
<body>
<p><span class='qtiptest'><b>Click me</b> for a qtip</span></p>
<p>
<p><span class='qtiptest'><b>Click me</b> for a qtip</span></p>
<p>
<p><span class='qtiptest'><b>Click me</b> for a qtip</span></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.qtip.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.qtiptest').qtip({
content: {
text: 'This is the qTip content.',
title: {
text: 'qTip Title',
button: 'X'
}
},
show: 'click',
hide: 'click'
});
// With beta4, I was able to add this qtip as well to the qtiptest class
$('.qtiptest').qtip({
content: {
text: 'Upon mouseover...'
},
show: 'mouseover',
hide: 'mouseout',
position: {
corner: {
target: 'topRight',
tooltip: 'bottomLeft'
}
}
});
});
</script>
</body>
</html>
Hi ivan,
Thanks for pointing out those bugs. The first was caused by a missing speech mark which caused the style class to get ignored on the element. Doh! The second bug was caused by some faulty API access code in the rendering stage which is now fixed in the latest code revision.
Make sure to upgrade!
http://bazaar.launchpad.net/~craig.craig...runk/files
Thanks again, Craig.
I upgraded to rev37 and, as you said, it fixed the second issue I mentioned in my last post.
I just upgraded to rev40, and it fixed the first issue I mentioned in my last post (second issue is still fixed). In my testing, I noticed that an alternative to (lines 1433-1435 in rev40):
JS Code
self.elements.button = $('<a>')
.addClass(self.options.style.classes.button)
.css({ position: 'relative', float: 'right' })
is
JS Code
self.elements.button = $('<a class="'+self.options.style.classes.button+'" style="float:right; position: relative"></a>')
It appears that inline elements like the anchor tag that are created by jQuery will work in IE when you include the end tag.
Also, I thought it would help to define a default class for the title button, after line 2028 in rev40:
JS Code
classes: {
target: '',
tip: 'qtip-tip',
title: 'qtip-title', // line 2028
button: 'qtip-button', // new default class for the title button
content: 'qtip-content',
active: 'qtip-active'
}
Hi ivan,
Thanks for the code suggestions, and well spotted on the inline element creation, looks to be working great now. I've implemented both in the newest rev41.
Hi Craig,
Thanks, I see the changes in the most current revision (47).
In the new content section, I found line 1134 needs an edit, from:
JS Code
if(typeof self.elements.target.attr('title') == 'string' && self.elements.target.attr('title').length > 0)
to:
JS Code
else if(typeof self.elements.target.attr('title') == 'string' && self.elements.target.attr('title').length > 0)
Thanks ivan, good spotting. Changed in the newest revision.
Craig:
I see the change in the most current revision (48). Thanks.
In the new jQueryStyle(), I found that line 1722 needs an edit in order to work in IE7, from:
JS Code
else if(title === false && i.search(/(width|border|tip|title|classes|user)/i) !== -1)
to:
JS Code
else if(typeof title === 'undefined' && i.search(/(width|border|tip|title|classes|user)/i) !== -1)
Thanks ivan, implemented this as of revision 50.
Thanks again, Craig. I just tried rev. 52 and everything looks great.