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: 4115    

12 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

The issue you're experiencing could be related to a compatibility problem between the newer version of the tooltip plugin and the version of jQuery you're using. Here are some steps you can take to troubleshoot and resolve the issue:

Check jQuery Version: Ensure that the version of jQuery you are using is compatible with the newer version of the tooltip plugin. Some plugins may not work correctly with older or newer versions of jQuery.

Check Plugin Documentation: Review the documentation of the tooltip plugin to see if there are any specific requirements or compatibility notes. It's possible that the newer version of the plugin requires a certain jQuery version or additional configuration.

Update the Tooltip Plugin: If there are newer versions of the tooltip plugin available, consider updating to the latest version. Plugin authors often release updates to address compatibility issues and bugs.

Check for JavaScript Errors: Open your browser's developer console and check for any JavaScript errors that may be occurring when the new version of the tooltip plugin is included. These errors can provide valuable information about what might be causing the issue.

Order of Script Includes: Ensure that you are including jQuery before the tooltip plugin in your HTML file. The order of script includes can sometimes affect how plugins interact with jQuery.

Conflict Resolution: jQuery provides a noConflict() method that can be used to resolve conflicts between jQuery and other libraries that may use the $ variable. You can try using jQuery instead of $ in your code to see if it resolves the issue.

Testing Without Other Plugins: To isolate the problem, try including only jQuery and the newer version of the tooltip plugin in a minimal HTML file. If it works in this simplified setup, gradually reintroduce other scripts and plugins to identify if any of them are causing conflicts.

Community Support: Check the plugin's support forum or community (snake 3D) for discussions or solutions related to this issue. Other users may have encountered and resolved similar problems. 

Downgrade Tooltip Plugin: If updating the plugin and adjusting the code doesn't resolve the issue, you may need to consider using the older version of the tooltip plugin (v2013.7.8) that you mentioned works without problems. However, keep in mind that using an older plugin version may have security and performance implications, so use it as a temporary solution while exploring other options.

By following these steps, you should be able to identify and resolve the issue with the tooltip plugin and jQuery compatibility.

NancyHall
  one month 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
0

make it difficult to link an external handler to a plugin element. Because when the plugin's element is clicked, the bubble effect is effectively disabled. Please, if you know how to stop this, let me know. Surely this issue has arisen previously at someone else.  free games

Joadny   5 months ago
0

$(document).on only doesnt work on the tooltip, every other element in the webpage executed correctly.

jamessmith
  4 months ago
0

I used to experience this issue as well, where including the newer version of the tooltip plugin disrupted the functioning of the $(document).on() function in jQuery, although using an older version of the plugin resolved the problem. wordle unlimited

jesse99
  3 months ago
0

Ensure that you have all the necessary dependencies for the latest version of the tooltip plugin. Some plugins may require specific versions of jQuery or other libraries. Make sure you have the correct versions of all required dependencies. FNF

bekean   2 months 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:
▲