How to use

It's easiest to just show examples of what you can do, so I'll start with a basic one:

new JustTheTip('.needs-tip', { 
    tip_html   : 'You will never see this.',
    show_delay : 0,
    hide_delay : 100,
    fade_in_duration  : 500,
    fade_out_duration : 1000,
    position: {position: 'bottomLeft'},

    onTipShown: function(tip,elem,jtt){
            tip.set('html', elem.get('html') + " tip");
    },

    shouldShowTip: function(elem){
        return elem.get('html').test(/brawndo/);
    }
});

This instance of JustTheTip will cause the following to happen: All elements with the class 'needs-tip', when mouseenter'd, will get a tooltip at their bottom-left whose contents are the same as the hovered element, plus " tip". But only if the element's html contains the string "brawndo". The tip will start to fade in immediately, but will start to fade out only after the mouse has left the tip & element for 100 miliseconds.

Let's look at an example that uses Event.Delegate:

new JustTheTip($('article_body'), {
tip_html   : "<a class='tip-preview-link'>preview</a>",
    tip_class  : 'article-link-tip',
    show_delay : 100,
    show_event : 'mouseover:relay(a.wikilink)',
    position: {position: 'centerRight', edge: 'centerLeft', offset: {x: 20, y: 30}},

onTipShown: function(tip,elem,jtt){
  tip.getFirst('.tip-preview-link').set('href', elem.get('href') + '/preview')
}

});

This instance will make a tip, with initial html/class as specified, show after the user has mouseover'd an anchor tag with the class 'wikilink' for 100 miliseconds within the element #article_body. When it is shown the link inside the tip will get an href based on the mouseover'd element. The center left side of the tip will be placed against the center right of the element with the given offsets.

For a demo of this an other tips, check http://www.bing.com/reference/semhtml/Achewood and hover over some links in the article. The first tip is what you see above, which has its own tip whose content is loaded with a Request.

Full documentation below:

Sytax

new JustTheTip(elements, [options])

Arguments

1. element - (mixed) An Element, an array of Elements or a CSS Selector.
2. options - (object, optional) the options described below:

Options

• show_delay : (number) Delay before tip is shown. Defaults to 400.
• hide_delay : (number) Delay before tip is hidden. Defaults to 200.
• show_event : (string/array of strings) Element.Event(s) that shows the tip. Defaults to 'mouseenter'.
• hide_event : (string/array of strings) Element.Event(s) that hides the tip. Defaults to 'mouseleave'.
• tip_html : (string) HTML to give tip element on creation. Defaults to ''.
• tip_class : (string) Class to give tip element on creation. Defaults to 'tip'.
• tip_enter : (string/array of strings) Element.Event(s) that signals the mouse has entered the tip. Defaults to 'mouseenter'.
• tip_leave : (string/array of strings) Element.Event(s) that signals the mouse has left the tip. Defaults to 'mouseleave'.
• fade_in_duration : (number) Duration of fade in Defaults to 0.
• fade_out_duration : (number) Duration of fade out Defaults to 0.
• position : (string or object) Position of the tip relative to its element. A string that follows the conventions of Element.Position. If you wish to specify the position and the edge, pass an object with both key/value pairs. Defaults to { 'position': 'upperRight', 'edge': 'upperLeft' }.
  • shouldShowTip : (function) a function that is passed the current hovered element and returns a boolean. If true is returned the tip will show, otherwise it will be ignored for this element.

Events

• tipInjected : The function to execute when the tip element is created and injected into the document. Gets passed the tip element and the instance of JustTheTip.
• tipShown : The function to execute when the tip element is shown. Gets passed the tip element, the element that triggered the showing, and the instance of JustTheTip
• tipHidden : The function to execute when the tip element is hidden. Gets passed the tip element, the element that triggered the showing, and the instance of JustTheTip

Screenshots

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.