#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0

    JQueryTOOLS Tooltip on image click instead of mouse hover


    Good morning. I've stumbled upon a little problem, if you could help me it'd be great.

    I've searched for Tooltips that support HTML content but most that I've found only support text passed by the html title attribute. The only one I've found that supports HTML code inside the tooltip was the jQueryTOOLS one http://jquerytools.org/

    I've already developed the Tooltip on mousehover but I want to make it onclick. I've tried to change the line 13 of the file ntip.js from:

    Code:
    jQuery(this).hover(function() {
    to:

    Code:
    jQuery(this).click(function() {
    with no success.

    Here's my tooltip code:

    Code:
    <body>
    
    ...
    
    <span class="formInfo">
            <img src="./produtos/subcategoria_portugues/$result4[0]" width="100" height="180">"; // imagem 
    
            <span style=\"display: none;\" class=\"mycontent\">
    
                    // tooltip content
    
                    </span>
    </span>
    
    <script type="text/javascript">
                $(document).ready(function(){
            $(".formInfo").tooltip(
            {           
                tooltipcontentclass:"mycontent" 
            }       
            )
    });;
    </script>
    </body>
    Then I've added the following lines of code before the closing of the head tag:

    Code:
    <script type="text/javascript">
         $(".formInfo").tooltip({
      events: {
      tooltip: 'click, click'
      }
      });
    </script>
    But the tooltip is still being shown on mousehover (default behaviour) instead of onclick. Do you know what I'm doing wrong?

    Thanks in advance
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0
    I managed to get a working jsFiddle example of what I want to do:

    jsfiddle.net/aSrVF/9/
    I tried to implement the example so I could adapt it with my content but it isn't working, when I mouse hover the image I get a "null" message. I'm including the ntip.js and jquery-1.3.2.min.js files, I have them in the js subdirectory.

    rapidshare.com/files/721270319/tooltip.zip
    If someone could check what's going on i'd be very grateful. Thanks

IMN logo majestic logo threadwatch logo seochat tools logo