Demonstration

• Default
  hover me Show usage

  $('.tip').miniTip();

• Click event
  click me Show usage

  $('.tip').miniTip({
    event: 'click',
    delay: 3000
  });
  

• Custom position and animation
  hover me Show usage

  $('#example-2 .tip').miniTip({
    className: 'green',
    offset: 30,
    showAnimateProperties: {'top': '-=10'},
    hideAnimateProperties: {'top': '+=10'},
    position: 'bottom',
    onLoad: function(element, minitip) {
      $(element).animate({'opacity': 0.35}, '350');
    },
    onHide: function(element, minitip) {
      $(element).animate({'opacity': 1}, '250');
    }
  });

Basic Usage

Basic HTML

<span class="tip" title="tooltip content">
  some text
</span>

Basic CSS

.minitip-content {
    font-size: 11px;
    padding: 8px 10px;
    color: #fff;

    background-color: #3C3C3C;
    border: 1px solid rgba(255, 255, 255, 0.25);

    text-shadow: 0 0 2px #000;
    box-shadow: 0 0 3px #555;
    border-radius: 5px;
}

Basic Initialization

$(function() {
  $('.tip').miniTip();
});

Options

• position (string)
  Tooltip position. Can be 'bottom', 'top', 'left' or 'right'.
  Default value is 'top' Show example

  $('.tip').miniTip({
    position: 'bottom'
  });

• event (string)
  Event type triggering the tooltip to be displayed. Values can be 'hover' or 'click'.
  Default value is 'hover' Show example

  $('.tip').miniTip({
    event: 'click'
  });

• offset (integer)
  Distance between the element and the tooltip (in pixels).
  Default value is 10 Show example

  $('.tip').miniTip({
    offset: 15
  });

• delay (integer)
  Time before the tooltip appears on hover event - How long it stays visible for on click event.
  Default value is 200 Show example

  $('.tip').miniTip({
    delay: 500
  });

• showArrow (boolean)
  Show tooltip arrow.
  Default value is true Show example

  $('.tip').miniTip({
    showArrow: false
  });

• contentType (string)
  Tooltip content type. Can be an element attribute or a DOM selector. Possible values are 'attribute' or 'selector'.
  Default value is 'attribute' Show example

  $('.tip').miniTip({
    contentType: 'selector'
  });

• contentAttribute (string)
  Attribute name if content type is 'attribute'.
  Default value is 'title' Show example

  $('.tip').miniTip({
    contentAttribute: 'data-mini-tip'
  });

• contentSelector (string)
  Selector if content type is 'selector'.
  Default value is an empty string Show example

  $('.tip').miniTip({
    contentSelector: '.mini-tip'
  });

• showSpeed (integer)
  Animation speed in milliseconds on show.
  Default value is 350 Show example

  $('.tip').miniTip({
    showSpeed: 200
  });

• hideSpeed (integer)
  Animation speed in milliseconds on hide.
  Default value is 250 Show example

  $('.tip').miniTip({
    hideSpeed: 100
  });

• showEasing (string)
  Easing equation on show.
  Default value is an empty string Show example

  $('.tip').miniTip({
    showEasing: 'easeInOutQuad'
  });

• hideEasing (string)
  Easing equation on hide.
  Default value is an empty string Show example

  $('.tip').miniTip({
    hideEasing: 'easeInOutQuad'
  });

• className (string)
  CSS class name added on the tooltip which can be useful for themes.
  Default value is an empty string Show example

  $('.tip').miniTip({
    className: 'blue'
  });

• showAnimateProperties (object)
  Animate properties on show, will fadeIn by default.
  Default value is an empty object {} Show example

  $('.tip').miniTip({
    showAnimateProperties: { top: "+=10" }
  });

• hideAnimateProperties (object)
  Animate properties on hide, will fadeOut by default.
  Default value is an empty object {} Show example

  $('.tip').miniTip({
    hideAnimateProperties: { top: "-=10" }
  });

• onHidden (function)
  Called when the tooltip is hidden.
  Default value is empty Show example

  $('.tip').miniTip({
    onHidden: function(element, tooltip) {
      // Do what you want
    }
  });

• onHide (function)
  Called when the tooltip is hiding.
  Default value is empty Show example

  $('.tip').miniTip({
    onHide: function(element, tooltip) {
      // Do what you want
    }
  });

• onVisible (function)
  Called when the tooltip is loaded.
  Default value is empty Show example

  $('.tip').miniTip({
    onVisible: function(element, tooltip) {
      // Do what you want
    }
  });

• onLoad (function)
  Called when the tooltip is being loaded.
  Default value is empty Show example

  $('.tip').miniTip({
    onLoad: function(element, tooltip) {
      // Do what you want
    }
  });

Connect

About

Matthieu Aussaguel

I am a Web Developer currently working at Envato as part of the Marketplace dev team in Melbourne, Australia. I focus mostly on Ruby/Rails technologies but I also enjoy coding in CoffeeScript in my spare time. Head over to my personal website and my Github page for more info about me.

Follow @mattaussaguel