I have been looking for a while, and maybe I'm not using the right terminology, but I'm trying to find out how to put a link inside of the jQuery tooltip, so when it pops up, I can display a menu in it. Can I just write the link out in the title like title="<a href=""></a>">

Here is what I currently have for my tooltip

      $(function() {
        $( document ).tooltip({
          position: {
            my: "center bottom-20",
            at: "center top",
            using: function( position, feedback ) {
              $( this ).css( position );
              $( "<div>" )
                .addClass( "arrow" )
                .addClass( feedback.vertical )
                .addClass( feedback.horizontal )
                .appendTo( this );
            }
          }
        });
      });

I have been looking for a while, and maybe I'm not using the right terminology, but I'm trying to find out how to put a link inside of the jQuery tooltip, so when it pops up, I can display a menu in it. Can I just write the link out in the title like title="<a href=""></a>">

Here is what I currently have for my tooltip

      $(function() {
        $( document ).tooltip({
          position: {
            my: "center bottom-20",
            at: "center top",
            using: function( position, feedback ) {
              $( this ).css( position );
              $( "<div>" )
                .addClass( "arrow" )
                .addClass( feedback.vertical )
                .addClass( feedback.horizontal )
                .appendTo( this );
            }
          }
        });
      });

• javascript
• jquery
• jquery-ui

• 2 Can you provide a jsfiddle example? – Dom Commented Apr 29, 2013 at 16:27
• Using jQuery UI or any other plug-in? – ButterDog Commented Apr 29, 2013 at 16:28
• jQuery tooltip is only in the UI – Christian Page Commented Apr 29, 2013 at 16:55

5 Answers 5

jQueryUI tooltips don't stick around if the user hovers off the element.

Adding a link to a jQueryUI tooltip is a bad idea in the first place since the user will not be able to click it (unless you are really fast)

The title attribute will most likely not meet your needs if you want more sophisticated tooltips. Here are some suggestions:

Build it yourself

Have a hidden div somewhere in your dom and use it to replace the standard tooltip. Use jQuery to display it and position it wherever it is needed. Use in conjunction with jQueryUI's content option if you wish.

<div id="tooltip">
  <div class="tooltipText"></div>
  <div class="menu">
    ....
  </div>
</div>

Use a different tooltip plugin

Here are 25 different tooltips, some of which allow you to put anything you like inside the tooltip. http://designshack/articles/javascript/25-useful-resources-for-creating-tooltips-with-javascript-or-css/

You can ment the following line regarding pointer events -

div.tooltip {
  position: absolute;   
  text-align: center;   
  width: 60px;  
  height: 28px;     
  padding: 2px; 
  font: 12px sans-serif;    
  background: lightsteelblue;   
  border: 0px;                  
  border-radius: 8px;

 /*  pointer-events: none;  This line needs to be removed */

}

If you want to dynamically insert content to the tooltip you can subscribe to the "open" event of the tooltip.

http://jsfiddle/PagNg/

Example:-

$( "a" ).tooltip({
  open: function( event, ui ) {
      $(ui.tooltip).append('<a href="http:\\www.google.">google</a>');
  }
});

The native design of the tooltip rely on different assumptions, so the behaviour you need (a sticky tooltip that allows the user to click its content) is not officially supported.

Anyway looking at this link you can see it's possibile to achieve what you need using jQuery Tools:

http://jquerytools/demos/tooltip/any-html.html

Here is a standalone demo

http://jquerytools/demos/tooltip/any-html.htm