Threaded Mode | Linear Mode

ivan

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.

***Craig***

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:

JS Code

onRender: function() {

That should fix your problem (just tested it).

ivan

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>

***Craig***

Ivan,

Most callback functions are passed the event parameter by default, so if you include it in the onShow function declaration like so:

JS Code

onShow: function(event){

You can use stopImmediatePropogation() to stop the other events firing (in theory). Try it out and get back to me!

ivan

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

JS Code

function afterHide() { }

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>

ivan

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.

***Craig***

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(); })
            }
         }
      });
});

ivan

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>

***Craig***

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!

ivan

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 Smile

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>

***Craig***

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

ivan

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'
         }

***Craig***

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.

ivan

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)

***Craig***

Thanks ivan, good spotting. Changed in the newest revision.

ivan

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

to:

JS Code

***Craig***

Thanks ivan, implemented this as of revision 50.

ivan

Thanks again, Craig. I just tried rev. 52 and everything looks great.

ivan

For a demo of implementing a button next to the title close button that will minimize/maximize the qtip content, please see http://craigsworks.com/projects/qtip/for...ent-title/.

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	Recover title attribute content on hide	baps	2	20	21st May 23:38 Last Post: baps
	[Solved] Show on click, hide on unfocus	ttomor	4	161	3rd May 14:39 Last Post: ttomor
	[Solved] Add Reload to Button	otti.steinhauer	3	283	29th February 19:31 Last Post: Craig
	[Solved] Tipp with title & content in title	fspade	2	366	21st February 06:42 Last Post: fspade
	qtip with jquery mobile tap event	finedesignz	1	650	4th January 21:18 Last Post: Craig
	Changing HTML Content on Click & Remove/Reinit qTips	ifthatdoesntdoit	5	1,235	17th November 09:46 Last Post: ifthatdoesntdoit
	[Solved] add an image to the qtip?	knowlton	2	1,008	21st October 04:58 Last Post: nevf
	[Solved] Incorrect behavior on first click?	fred_tededmondsson	16	1,415	20th September 17:49 Last Post: fred_tededmondsson
	[Solved] Pass title AND content in attr:title with separator	johndubya	2	1,061	20th July 22:27 Last Post: johndubya
	[Solved] Add div tage in Qtip.	Elango	1	1,025	12th July 17:31 Last Post: Craig