Simpltry Tooltip Widget

simpltry_widget="mouseover_tooltip"

In this example we build our tooltip with a preexisting dom element. Mouse over the "anchor" text below to see a demo of the Mouseover Tooltip. When you don't include the "tooltip" option the widget just assumes you want to show the next dom element.

anchor

example markup:

<p id="anchor" simpltry_widget="mouseover_tooltip">anchor</p>
<div id="anchor_tooltip" style="display:none;" class="simpltryTooltip">tooltip</div>

simpltry_widget="click_tooltip"

Sometimes all you need is a simple text only tooltip. Then it is much simpler to pass the option "tooltipText". This will create the necessary html at load time. If you choose to go this route you can style the toolip with the class "simpltryTooltip". This example also demonstrates that you can choose which direction you want your tooltip to display (currently only right and below are supported), if you choose right and your anchor is a block level element you will really need to specify a width on your anchor or else you tooltip will not display anywhere near your anchor

adhock tooltip anchor

example markup:

<p id="anchor" style="width:9em;" simpltry_widget="click_tooltip" simpltry_options="tooltipText: 'this is adhock text'">
  adhock tooltip anchor
</p>

relative: "cursor"

By default the tooltips show up relative to the anchor. You can use the relative option to make the tooltip popup under the cursor.

adhock tooltip anchor

example markup:

<p id="anchor" style="width:9em;" simpltry_widget="click_tooltip" 
          simpltry_options="tooltipText: 'this is adhock text',relative:'cursor',offsetLeft:7">
  adhock tooltip anchor
</p>