mike enriquez

• feed
• twitter.com/enriquez
• github.com/enriquez
• [email protected]

EZPZ Tooltip Demo

The following are some examples of how the EZPZ Tooltip can be used.

Click here to visit the documentation

Default, no options

The tooltip appears as you hover over the target, and follows the mouse cursor until it leaves the target.

$("#simple-target-1").ezpz_tooltip();

Effects

The options showContent(content){} and hideContent(content){} allow you to customize how the content element is shown and hidden. Given a reference to the content element, you can call an effect on it.

$("#effects").ezpz_tooltip({
  contentId: 'simple-content-1',
  showContent: function(content) {
    content.fadeIn('slow');
  },
  hideContent: function(content) {
    // if the showing animation is still running, be sure to stop it
    // and clear the animation queue. otherwise, repeatedly hovering will
    // cause the content to blink.
    content.stop(true, true).fadeOut('slow');
  }
});

Static Position

The tooltip appears in a static position relative to the target.

$("#static-target-1").ezpz_tooltip({ contentPosition: 'rightStatic' });

Stay on Content

A static tooltip that stays visible when mouse is over the target and the content.

$("#stay-target-1").ezpz_tooltip({
  contentPosition: 'belowStatic',
  stayOnContent: true,
  offset: 0
});

AJAX

A tooltip with the content loaded with AJAX

$("#ajax-target-1").ezpz_tooltip({
  beforeShow: function(content){
    if (content.html() == "") {
      $.get("/ajax.html", function(html){
        content.html(html);
      });
    }
  }
});

Getting Fancy with it

Using CSS, the content element can be styled with a background image that uses transparencies.

• ← Back