simpleTooltip

simpleTooltip - the analogue or a lite-version of Tipsy Tooltip.

Most part of the development is implemented in CSS, but the role of controller performs a small JavaScript library.

Features

• Only 3 Kb of exhaustive code.
• Works in most browsers.
• Easy to use.
• Compact and harmonious appearance.
• Simple text prompts without additional complexity.

Usage

Use of tooltip is possible on any HTML element. Just add the data-shift and data-title attributes to it. Value of the first one must be a predefined word that affects the positioning of a tooltip relative to the element to which it's given. The second - text of a tooltip (markup isn't supported).

Possible values for the data-shift and their impact on a shift:

| Value | Tooltip direction | | ----- | ----------------- | | nw | Northwest | | north | North | | ne | Northeast | | west | West | | east | East | | sw | Southwest | | south | South | | se | Southeast |

Examples

var params = {
    shift: 'west',
    title: 'Some text for displaying'
};

/**
 * For {Element}.
 */
document.getElementById('id').simpleTooltip(params);

/**
 * For {NodeList}.
 */
document.querySelectorAll('.class a').simpleTooltip(params);

/**
 * For {jQuery}.
 */
jQuery('.class a').simpleTooltip(params);

Note, the parameter to .simpleTooltip() must be an object that might contain shift and/or title. You can reimburse lack of parameters by setting them as attributes to HTML element (data-shift and/or data-title or title).

Examples with incomplete list of parameters:

<span title="Some value"></span>
<script>
  document
    .querySelectorAll('span')
    .simpleTooltip({shift: 'south'});
</script>

<!-- CSS class is used only for example. -->
<div class="set-tooltip" data-shift="west"></div>
<script>
  document
    .querySelectorAll('.set-tooltip')
    .simpleTooltip({title: 'Some nice text'});
</script>

There's also an ability to conditionally display the tooltip. Pass a function assigned to the hideIf parameter and compute the necessity of showing the tip.

document
.querySelectorAll('.set-tooltip')
  .simpleTooltip({
    shift: 'south',
    title: 'Some nice text',
    // Show the tooltip if a text within a container is wider than its width.
    hideIf: (element) => element.offsetWidth >= element.scrollWidth,
  });

Why JavaScript is needed?

Functions of the plugin aren't numerous. Initially performs a check for positioning the elements that have a tooltip - it shouldn't be static. For this reason, all non-conforming elements receive relative positioning.

When you hover the mouse over an element, its width gets calculated. If it's not more than maximal and tooltip not directed to south or north - plugin will do nothing more, otherwise:

• width is greater than maximal - tooltip gets a value of maximum width and a special text formatting.
• directed to south or north - the tooltip will be aligned to the center of an element.

Crossbrowsing

• IE 9+
• Chrome 2.0+
• Opera 9.0+
• Safari 3.1+
• Firefox 1.0+
• Android 1.0+
• iOS 1.0+