• :: jQuery ::
  • Intro
  • jquery.printf.js
  • jquery.image.js


• :: Legacy ::
  • Intro
  • Coding Style
  • main.js
  • fieldgroup.js
  • formval.js
  • date.js
  • image.js
  • tooltip.js

Description

Almost all browser support some form of "tooltip" natively, via the "TITLE" attribute of HTML element. However, this feature is inconsistently implemented, and browser limitation make this unpractical or useless depending on what you are looking for. Notably, you can't insert HTML content on those tooltips, and only a few browsers accept multi-line values. This library replaces the default handling of TITLE attributes by a mecanism which solve those issues.

How to use it

Mouse-over tooltips

Those tooltips are activated when the mouse rest of the element area, and they hide automatically when the mouse leaves this area. All tooltips are mouseover by default.

<span
  title="Simple tooltip message">
  this area
</span>

<span
  title="Tooltip message|Simple tooltip message"
  this area
</span>

Focus tooltips (form fields)

In addition to trigger the tooltip visibility with mouse position, you may also choose to display tooltips when the keyboard focus enter a form field; this is a convenient way of guiding end user input. When this tooltip is opened this way, its position is choosen so that it does not cover the field.

<form mjstooltipmode="focus">
...
</span>

Complex tooltip messages

If your tooltip message contains HTML tags and is a little more complex than a simple string, you may find unpractical the use of TITLE attribute. The tooltip module offer an indirection mecanism which let you define the tooltip content somewhere as part of your document (and with hidden visibility) so that you can compose the message with your favorite editor, without dealing with awful quoting problems (remember, the TITLE attribute must be quoted, and what you put inside need backslashed-quoting \" or \').

In addition to an easier definition of tooltip content, this feature makes possible to recycle the same message for multiple nodes; this may be very interesting if you deal with large set of data having common tooltips.

<span id="aComplexTooltip" style="visibility:hidden;">
   <p>Here is a Sample long tooltip message, using
   <i>arbitrary</i> HTML content:</p>
   <ol>
     <li>List item #1</li>
     <li>List item #2</li>
   </ol>
</span>

<span title="Complex tooltip|#aComplexTooltip">complex tooltip</span>

Note: only the body of the tooltip message can be set this way; the title must be entered as part of the TITLE attribute.

Large tooltip messages

By default, the tooltip module do not apply specific size adjustment on tooltip message. This is usually fine when dealing with small messages, but this may be problematic with large messages. Instead of statically sizing tooltip messages via a CSS style, you can define the maximum width that a tooltip can use by setting the "mjsTooltipMaxWidth" attribute; this size is set in pixels (do not use the "px" suffix though).

This attribute is inherited; hence you can set it once for multiple tooltips (at the BODY tag level for example).

<span mjstooltipmaxwidth=300
   title="Large tooltip|#aLargeTooltip">large tooltip
</span>

Styling tooltips

In order to make this toolkit instantly usable, the tooltip module generates hardcoded styles for the tip message which mimic the usual rendering for bubble information in most platform (a pale yellow background and a thin black border). If you want to adjust tooltip rendering, you can instruct the module to attach an arbitrary CSS class to the tooltip, which let you customize everything as you wish by editing a few styles. This is done by specifying the attribute "mjstooltipclass". This attribute is inherited, hence attaching this to the BODY tag will redefine all tooltips of the document.

In order to properly implement styling, you need to know hos the tooltip content is organized. The tooltip module used a few CSS classes for each of its components:

<DIV class="[yourClass]">
  <DIV class="[yourClass]_caption">
     Tooltip caption
  </DIV>
  <DIV class="[yourClass]_body">
     Tooltip content
  </DIV>
</DIV>

Here is an example:

.MyTooltip
{
	background-color: #A0A0FF;
	color: black;
	padding: 0px;
	border: 1px solid black;
}
.MyTooltip_body
{
	padding: 10px;
}
.MyTooltip_caption
{
	background-color: #000080;
	color: #FFFFFF;
	font-style: italic;
	font-weight: bold;
}

<span mjstooltipclass="MyTooltip" title="Title|Customized tooltip">
  custom tooltip style
</span>

Technical notes

How it works

JavaScript API

mjs_setTooltipClass(className)

mjs_setTooltipShadowSize(sz)

mjs_setTooltipMaxWidth(sz)