Member Avatar for wiLLie222

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:

jQuery(this).hover(function() {

to:

jQuery(this).click(function() {

with no success.

Here's my tooltip 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:

<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 Contributors
  • 7 Replies
  • 1K Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by wiLLie222

Recommended Answers

All 7 Replies

Member Avatar for LastMitch

But the tooltip is still being shown on mousehover (default behaviour) instead of onclick. Do you know what I'm doing wrong?

Since you got the code from jquerytools.org there is a forum where you can post a question regarding about how the code works and if you are not sure how the code works you can post it on there because it's their product and code.

I have used jquerytools.org plugin

Edited by LastMitch because: grammer
Member Avatar for wiLLie222

jquerytools.org forum has been closed for some time now

Member Avatar for LastMitch

jquerytools.org forum has been closed for some time now

I don't think it close yet

Read this:

http://jquerytools.org/documentation/basics.html#document_ready

I notice also you did something here: why 2 click?

<script type="text/javascript">
$(".formInfo").tooltip({
events: {
tooltip: 'click, click'
}
});
</script>

I don't see that anywhere in the link?

What are you doing?

There are 7 examples for Tooltips in the link which one are you using?

Member Avatar for wiLLie222

Thanks for the answer.

I'm using this example: http://jquerytools.org/demos/tooltip/any-html.html

I'm using 2 clicks because I want to show the tooltip on the first click and hide it on the second click. It could also be tooltip: 'click, dblclick'

I managed to get a working jsFiddle example of what I want to do: http://jsfiddle.net/aSrVF/9/

But for some reason, the code is not working in my page with a bit more complex html content inside the tooltip. Can you please take a look into my page code to see if you can figure out what I'm doing wrong?
http://pastebin.com/DfT8BnXT
I'd be very grateful. Thanks

Member Avatar for LastMitch

But for some reason, the code is not working in my page with a bit more complex html content inside the tooltip. Can you please take a look into my page code to see if you can figure out what I'm doing wrong?

Did you include this file:

http://code.google.com/p/fotogen/source/browse/trunk/templates/mwc_fogten/js/ntip.js?spec=svn38&r=38

There's nothing wrong with your code.

This line it should be not this

<img id="download_now" src="http://jquerytools.org/media/img/downloadnow.png"/>

but this:

<a href="download_now"><img src="folder/downloadnow.png"/></a>

But overall there's nothing wrong with the code.

You need to used :

.tooltip

instead of

mycontent
Edited by LastMitch because: grammer
Member Avatar for wiLLie222

I tried to implement the jsfiddle 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.
Can you please check what's going on, if you don't mind?

http://rapidshare.com/files/721270319/tooltip.zip

Thank you once again for your help

Edited by wiLLie222
Member Avatar for wiLLie222

Problem solved

Edited by wiLLie222
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.