Opentip is a Javascript Class built on the Prototype framework. It provides easy to use tooltips. Yes - it's free, open source and comes with different styles!
Demos
Styles
We offer a view styles, and it's easy to create your own styles.
Effects
You can easily use any effect scriptaculous offers to make a toolmake appear or disappear.
Events
Joints & targets
With joints and targets it's extremely easy to position your tooltips exactly where you want them.
Stems
If you activate a stem, it gets automatically positioned at the tooltip joint, but you can overrule the position.
AJAX
By adding one option, your opentip automatically downloads content with Ajax.
The following is also possible, but really just a hack I implemented for compatibility reasons with other tooltip classes.
// When called externally:
new Tip('elementId', etc...);
// When called as event (eg: onmouseover or onclick):
new Tip(this, event, etc...);
Those are the possible ways to pass arguments:
$('elementId').addTip('content', 'title', { options...});
$('elementId').addTip('content', { options...});
$('elementId').addTip({ options...}); // Only makes sens with AJAX
Options
The options object contains following values:
classNameThe class name to be used.'standard'
stemThree possible values: false: no stem true: stem at tipJoint POSITION POSITION (for stems in other directions)false
delayIn seconds. If null the best delay is automatically chosen (depending on the showOn event).null
hideDelayIn seconds.0.1
fixedIf target is not null, elements are always fixed.false
showOnEvent name (eg: 'mouseover'), or 'creation' if you want it to show when the tooltip is created. Null if you want no event.'mouseover'
hideTriggerWhich element should trigger the hiding process. Possible values are: 'trigger', 'tip', 'target', 'closeButton', ELEMENT, or null'trigger'
hideOnEvent name. (eg: 'click'). If false Opentip decides which event is best ('click' for closeButton, 'mouseout' if not).null
offsetDefined like this: [ xInteger, yInteger ].[ 0, 0 ]
autoOffsetIf set to true, offsets are calculated automatically to position the tooltip. (pixels are added if there are stems for example)true
containInViewportIf set to true, opentips that would appear offscreen are repositioned inside the browser viewport. targetJoints, tipJoints and stems are also repositioned.true
showEffectThe string of the scriptaculous effect you would call as a function on the object.'appear'
hideEffectThe same as show effect'fade'
showEffectDurationExpressed in seconds0.3
hideEffectDurationExpressed in seconds0.2
stemSizeAn integer defining the stem size in pixels.8
tipJointThis is a POSITION. The tip joint defines which part of the tooltip is the "pointer".[ 'left', 'top' ]
targetIf null, no target. If true: the trigger element is the target. Otherwise pass an ELEMENT.null
targetJointThis is a POSITION. The target joint defines where the tooltip points to. If set to null, it's the opposite of tipJoint.null
ajaxAn object formed like this: { url: 'address', options: { AJAXoptions } } For more information on Ajax tips see the examples section.false
groupSimply pass a string as the group name (eg: 'login'), and all visible tooltips in this group will be hidden when a tooltip in this group is shown.null
As you see you can decide when the tooltip disappears by selecting a hideOn event.
But you can also easily define your own close buttons. In fact, as soon as opentip finds an element with the class 'close' it observes this element as close button.
So just add this to your content (this also works with Ajax):
<button class="close">Click me to close</button> // or
<a href="javascript:undefined;" class="close">Click me to close</a>
Styles
Styles are an easy way to setup your opentips without having to pass the options every time you want an opentip to appear.
Styles are a way to group options, and reuse them.
The styles we offer differ mainly in the design, but styling can be much more useful!
Note that this creates valid links that point to your resource, so search engines can index those resources.
When an opentip is added to a link and the ajax option is set, but no url is given, Opentip automatically uses the href
attribute of the link as Ajax url. If you want to pass additional parameters to the ajax call, just use:
Opentip is quite usefull to manage forms too.
This example shows how you would notifiy a user an input field is not correct.
In this case username can't be empty, and the notification only disappears when the user changes the input.
There are a view more useful properties of the opentip class, that are not needed that often, but are quite useful.
Debugging with Firebug or Safari
To set the opentip class to debuggin mode, just set Opentip.debugging = true; after including the opentip.js file.
If you have Firebug or Safari in developer mode, opentip will then output some debugging information.
Multiple Ajax links
This example is something I found useful in some situations.
Apply Opentip to multiple elements, to transform links to ajax requests.
This avoids unnecessary element creation at the creation of a tooltip.
If the content is set as a function, this function will be called when the tooltip is first shown, and the result is used as content.
Example:
var myObject = {
buildTooltipElements: function(tip) {
return Builder.node(
'div',
'This is the content of tooltip #' + tip.id
);
},
setupTooltip: function() {
$('someElement).addTip(this.buildTooltipElements);
// Don't forget to use .bind(this) if necessary.
}
};
Additional information
To prevent surprises, and to fully list all of opentip features, here is some additional information about the opentip class:
Opentip automatically focuses the first input/textarea found in the content when shown.
When you call .hide() on a tip manually, you can pass along the afterFinish parameter, which is a function that will be called after the hideEffect has finished.
Opentips get repositioned when the browser gets resized.
YES! Some of the stuff is based on CSS3. But only the eye candy stuff, like rounded corners and box shadows.
If you can't live with that... well contact me. If I have a good day I'll implement some workarounds.