documentation

To programmatically instantiate an Opentip you use this syntax:

new Opentip("#my-trigger-element", "Optional content", "Optional title", { ...options... })

The content and title are
optional but it doesn’t make much sense to omit the content unless
the content gets downloaded with AJAX.

Alternatively you can use html attributes to create opentips:

html attributes

When the document is loaded Opentip scans the document and finds all elements with a data-ot attribute,
and instantiates an Opentip automatically. To configure the Opentip this way simply add attributes beginning with data-ot- and
the dashed option name. Example:

<div data-ot="The content" data-ot-delay="2" data-ot-hide-trigger="closeButton">Hover me</div>

opentip object api

You can manage Opentips with a few methods after you created them.

var myOpentip = new Opentip($("#element"));

myOpentip.show(); // Shows the tooltip immediately
myOpentip.hide(); // Hides the tooltip immediately
myOpentip.prepareToShow(); // Shows the tooltip after the given delays. This could get interrupted
myOpentip.prepareToHide(); // ...

myOpentip.deactivate();
myOpentip.activate();

myOpentip.setContent("New content"); // Updates Opentips content

targeting

By default Opentips «target» the mouse cursor, which means they follow the mouse. If you want the Opentip to be fixed, you could do so by setting the fixed:
true option, but that would still make the Opentip appear at the cursor position.

To tell an Opentip that you want it to point to an element, you can set the target:

// This will create an Opentip pointing to the top center of #target-element
new Opentip("#trigger-element", { target: "#target-element", tipJoint: "bottom" });

(This automatically sets the fixed option
to true)

Since most of the time your target element will be the trigger element, you can just set: target:
true.

creating styles

Styles are a way to store predefined settings. So instead of setting the color, and stemsize, etc… on every Opentip you create, you can just create one style
and reuse it in all of your Opentips.

You can define everything in a style that you could define in the opions object. So if, for example, all your error tooltips should look like the built in alert theme,
should be fixed, have a stem and should be shown on creation you could create the style like this:

Opentip.styles.myErrorStyle = {
  // Make it look like the alert style. If you omit this, it will default to "standard"
  extends: "alert",
  // Tells the tooltip to be fixed and be attached to the trigger, which is the default target
  target: true,
  stem: true,
  showOn: "creation"
};

// Then use it like this:
myTip = new Opentip(triggerElement, "Content", { style: "myErrorStyle" });

Side note: The options object
you pass when creating an Opentip is actually just an ad hoc style created only for this one specific tooltip. The options style and extends are
actually exactly the same. So you could theoratically create an Opentip like this: new
Opentip("Content", { extends: "myErrorStyle" }); although I feel that style is
better suited in that case.

You can also set a default style that all Opentips that don’t specify a specific style option
will use like this:

Opentip.defaultStyle = "myAwesomeStyle"; // The default is "standard"

grouping opentips

Sometimes you want to hide other Opentips when showing one.

For example: you could have a list of tags and when the user clicks one you show some additional tag information. But you also want to hide all other tag informations so to make sure that only one Tag-Opentip is visible at all times.

This is done through grouping:

<a href="/tag-info/tag/1" data-ot="Tag info 1" data-ot-group="tags" data-ot-ajax="true">Tag 1</a>
<a href="/tag-info/tag/2" data-ot="Tag info 2" data-ot-group="tags" data-ot-ajax="true">Tag 2</a>
<a href="/tag-info/tag/3" data-ot="Tag info 3" data-ot-group="tags" data-ot-ajax="true">Tag 3</a>

Note: This example is not the best way to solve such problems. Look at the “Best practices” section below for a better way
to handle it.

programmatically managing opentips

One of the most common questions asked is how to hide Opentips or disable them.

Most problems arise because often Opentips are created with HTML data- attributes
although it makes more sense to create them programmatically.

Here’s an example of how you would manage an Opentip in your application with jQuery:

$(function() {
  // Start when document loaded
  var myInput = $("#my-input");
  var inputOpentip = new Opentip(myInput, { showOn: null, style: 'alert' });

  // Hide the tooltip on focus so we don't bother the user while editing.
  myInput.focus(function() { inputOpentip.hide(); });
  myInput.change(function() {
    if (myInput.val()) {
      // Everything fine
      inputOpentip.hide();
    }
    else {
      // Oh oh
      inputOpentip.setContent("Please fill out this field.");
      inputOpentip.show();
    }
  });

});

If for some reason you can’t or don’t want to create Opentips programmatically but still want to access them, there’s good news! You can.

Every Opentip created is stored on the element itself in an opentips array.
To access it, you can use the functions provided by your framework to access arbitrary data of HTML elements.

  // jQuery

  $("#my-element").data("opentips"); // Returns a list of Opentips associated with this element

  // Prototype

  $("my-element").retrieve("opentips");

  // Ender

  $("#my-element").data