CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Christian Page
Christian Page

Reputation: 151

Add a link inside jQuery tooltip function

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 );
            }
          }
        });
      });

Upvotes: 2

Views: 12226

Answers (5)

Dinesh
Dinesh

Reputation: 2204

You can comment 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 */

}

Upvotes: 1

NinjaCross
NinjaCross

Reputation: 843

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.org/demos/tooltip/any-html.html

Here is a standalone demo

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

Upvotes: 0

Yoni Baciu
Yoni Baciu

Reputation: 2707

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)

Upvotes: 2

PSL
PSL

Reputation: 123739

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

http://jsfiddle.net/PagNg/

Example:-

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

Upvotes: 0

sscirrus
sscirrus

Reputation: 56789

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.net/articles/javascript/25-useful-resources-for-creating-tooltips-with-javascript-or-css/

Upvotes: 1

Related Questions