Learn how to connect an HTML form to the database and email! It takes only 3 minutes. Read more

javascript by
Free Download

Elixon Tooltip 2

Buy Now! 1 $
  • Home
  • Gallery
  • Overview
  • API
  • Appearance
  • Examples
  • Contents
  • Questions
  • Static HTML

    Show the tooltip right away.

      $('#my').et('<p>Hello World</p>');

    Show on click.

      $('#my').et('<p>Hello World</p>', 'click');

    Default Content

    Embed the element with id elementID into the bubble.

      <a id="my" href="#elementID">Link</a>

    Open the iframe with the link inside the bubble.

      <a id="my" href="http://google.com">Link</a>

    Display linked image inside the bubble.

      <a id="my" href="./myimage.png">Link</a>

    Display the title text.

      <abbr id="my" title="My Title">Link</abbr>

    Generated Content

    Per-image tooltip text using the title attribute on mouse hover and callback. In fact this is the default behavior if no content or callback is provided.

      $('img[title]').et(function() {return $('<div></div>').text($(this).attr('title'));}, 'hover');



    Tooltip Groups

    "Radio" tooltips - showing one hides the others from the same group.

      $('img.i1').et('click', {group: 'myGroup1'});
      $('img.i2').et('click', {group: 'myGroup1 myGroup2'});
      $('img.i3').et('click', {group: 'myGroup2'});


    Hide the tooltip automatically after 3 secons.

     $('#my').et('<p>Hello world!</p>', 3000);
     $('#my').et('<p>Hello world!</p>', {duration: 3000});


      $('#my').et({position: "top", align: "start"});

    Position Hinting

      <div class="etBottom etCenter">
        <a href="./my.png">Icon</a>
    	<a href="./my2.png" class="etAuto">Icon</a>
      <script type="text/javascript">$('a').et('hover');</script>

    Default Settings

     $.fn.et('defaults', {look: 'light', className: 'bubble'});
     $.fn.et('defaults', 'hover', 5000); // default method is hover for 5s