Javascript Tooltip / Posts /

documenton not working after including v201420

8
Anyone else having this problem?

Whenever i include this tooltip plugin. The $(document).on() function of jQuery stops working. No errors, it is executed, but it does not work anymore... no functionality what so ever.  When i include a very old version of the plugin (v2013.7.8) the problem goes away.

I need the newest version to work. 

Any who has an idea?
Ralph  9 years ago   viewed: 3844    

7 Answers

0
$(document).on only doesnt work on the tooltip, every other element in the webpage executed correctly.
Ralph   9 years ago
1
I found out this line of code in the plugin: 

L=function(a){if(a&&a.stopPropagation)a.stopPropagation();

makes it impossible to bind a handler from outside the plugin to an element inside the plugin. Because it basically shuts off the bubble effect when an element in the plugin is clicked. Can anyone tell me how to stop this? Im sure this problem should have accured at someone before. 
Ralph
  9 years ago
0

You might trying to do something when a link inside the tooltip popup is clicked.

Tooltip has disabled the click's bubble up so that the tooltip can work properly in mobile and touch-enabled devices. 

If you need this bubble up, you can search for b[ib]=L; in the tooltip.js and comment it out: /*b[ib]=L;*/

Notice the b[ib]=L; can only be found in the current version v2014.2.20 of the tooltip.js.

Milo   9 years ago
0
Hi, I am almost done figuring a workaround without using $(document).on(), so no bubbling. I do still have a question.

I do not open the tooltip on a generated element. Instead i remember the element for later: 


 <b onmouseover="tooltip.ajax(this,'test.html', {sticky:true}); myElement = this;">Click Me</b>     <-- not generated


Then the next tooltip has to open on the previously hovered element like this: 


<b onclick="tooltip.ajax(myElement,'test.html', {sticky:true, position: 4})">Click Me</b>  <-- Generated html shown in tooltip


In my script i have: var myElement; in the global scope. 


This means myElement SHOULD HAVE a position. Because it was not generated. But the whole tooltip stops working at this point. Even with position: 4, it does not show any tooltip on the screen.


​Why cant i store an element for parameter of the tooltip for later on?

Ralph   9 years ago
0
Hi Ralph,
I tested the demo2.html in the download tooltip package with some modifications to test your case. It works quite good without any issue. Below is the changes I have made:

In demo2.html, the new markup:
<p> ... <span><a class="tooltip" href="src/tooltip-ajax.html#div2" onmouseover="tooltip.ajax(this, 'src/tooltip-ajax.html#div2'); myElement=this;" onclick="return false;">load page fragment</a><span> ... ... <p>

In tooltip-ajax.html, the new markup:
...... <div id="div2"> <h2>Load Tooltip with Page Fragment</h2> <img src="src/tooltips-cd2.jpg" style="float:right;margin-left:20px; width:75px; height:75px;" alt="" /> <p>If adding "#div2" to the Ajax url, the tooltip will be loaded with the page fragment within the DIV element (id="div2").</p> <p><a class="tooltip" href="src/tooltip-ajax.html" onclick="tooltip.ajax(myElement.parentNode, 'src/tooltip-ajax.html');return false;">triggered by hijax link wcb</a></p> </div>
Milo   9 years ago
0
Well, I am about to give up. This problem has been keeping me busy for days now. I downloaded a fresh demo. Changed the codes like you described. And the same problem!! 

When I check if the code even is executed like this: 

<p><a class="tooltip" href="src/tooltip-ajax.html" onclick="console.log(myElement); tooltip.ajax(myElement, 'src/tooltip-ajax.html');return false;">triggered by hijax link wcb</a></p>

It shows me an console log with the correct element. So the tooltip code IS being executed. And the tooltip is given the right parameter. I don't get a single warning or error. But the thing just wont show the second tooltip.

 I ran this script on my localhost (wamp). But on my server i had the same problem. What could be different from your environment than mine?

EDIT: When i fill the var myElement with a random element it does work. But it just looks like it cannot bind the tooltip to the element when it has already bouned to that same element.

Element -> tooltip -> onclick="tooltip.pop(Element2, etc);" <-- That works (It shows the next tooltip on Element2)
Element -> tooltip -> onclick="tooltip.pop(Element, etc);" <-- That does not work because it is the same element (The tooltip might think the element is already occupied or something)

Ralph
  9 years ago
1

I found the root cause. If the tooltip.ajax() is to be triggered by the same element while the tooltip is still open, the ajax call will be cancelled to avoid unnecessary calls to the server.

For your case, the workaround is:

  1. Wrap each Ajax triggering element(<a>...</a>, the myElement) in the demo2.html with a span element(<span><a>...</a></span>)
  2. Force the link in the opened tooltip window that can trigger the next tooltip.ajax() to target the myElement's parent node, the <span></span>. So the link in tooltip-ajax.html should be written as below:
    <a class="tooltip" onclick="tooltip.ajax(myElement.parentNode, 'src/tooltip-ajax.html');">Open another tooltip</a>

Note: the nested tooltip must be triggered by onclick. Launching nested tooltip from the opened tooltip window by onmouseover won't work.

Now the two Ajax tooltip calls are targetting different elements, and it won't be cancelled anymore.

I have updated the demo2 code example in my previous post to include the workaround.

If you need the updated demo2 source code, just send an email to info @ menucool . com

Milo   9 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲