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
  • Installation & Basic Usage
  • Syntax
  • Finding Tooltips & Source Elements
  • Installation & Basic Usage

    In order to use Elixon Tooltip you have to include the core jQuery library, jquery.tooltip.min.js and jquery.tooltip.css.

    <link type="text/css" rel="stylesheet" href="./jquery.tooltip.css" />
    <script type="text/javascript" src="./jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="./jquery.tooltip.min.js"></script>
    The typical usage example:
    $('#myImage').et('<p>Click to enlarge.</p>', 'hover');
    If you want to embed the whole existing form into a bubble attached to a button on click:
    $('button').et('form.myForm', 'click');


    Standard call

    jQuery.et([action,] [toggle,] [content,] [options,] [generator,] [duration]);

    Setting up defaults

    $.fn.et('defaults', [DEFAULTS]);


    • action:string - show, hide, align
    • toggle:string - toggle event name: click, hover, focus, blur
    • content:mixed - HTML content or jQuery selector or jQuery object to display existing HTML inside the tooltip
    • generator:function(element) - call back function to return the content dynamically.
    • duration:number - display the tooltip for specified amount of milliseconds - default: 0 (no timeout)
    • options:{} - any of following options
      • method:string - see above
      • content:mixed - see above
      • generator:function - see above
      • look:string - any class name to attach onto .et element. Current CSS supports by default dark, yellow, blue, sand, green, red, box. You are free to add your own CSS - refer to Appearance section for more details.
      • fx:mixed - existing effect name show, fade, slide or callback function(settings:{}, show:bool) providing custom effect.
      • position:string - auto, top, right, bottom, left
      • align:string - auto, start, center, end
      • className:string - addition CSS class names to add onto .et element
      • toggle:string - see above
      • group:string - white-space separated list of group names. Only one tooltip from each group can be visible at a time.
      • duration:number - see above

    Custom Effects

    You can write your own special effect you the inbuilt show, fade, slide effects are not enough for you.

          var myFX=function(settings, show) {
            var $attachedTo=$(this).data('etSrc');
            var $tooltip=$(this);
            $attachedTo.css('border', show  ? '1px solid red' : 'none');
            if (show) {
            } else {
          // Call with custom FX
          $('#my').et('<h1>Hello world!</h1>', {fx: myFX});

    Position Hints

    Very often happens that you want to hove more control over the bubble position. Although Elixon Tooltip has smart automatic positioning inbuilt and you can control the position individually for each bubble you may happen to need for example that all bubbles inside a table face right while all bubbles inside the header face down.

    To indicate the desired bubble position add the etBottom, etTop, etRight, etLeft, etStart, etCenter, etEnd class names to a HTML block. All bubbles attached to any element inside this block will honour these position hints.

      <table class="etRight">
      <script type="text/javascript">
    	// will face right and will by default automaticaly
    	// display the 'title' attribute text on mouse 'hover'
    	$('table td').et('hover');
    	// Same as
    	$('table td').et('hover', {position: 'right'});

    Use etAuto class name to cancel the hinting inherited from a parent element for all bubbles attached to descendant elements of the element having the etAuto class name.

    Finding Tooltips & Source Elements

    The object that the Tooltip is attached to is stored in a data property etSrc on a bubble's div.et element.

    var $sourceElement=$('.et:first').data('etSrc');

    If you need to find bubble's div.et element then check the et property on the element the bubble is attached to.

    var $bubbleElement=$sourceElement.data('et');