BR0kEN- / simpleTooltip

CSS tooltips with position control via JS.
http://firstvector.org/simpleTooltip
MIT License
38 stars 8 forks source link
css javascript position positioning simpletooltip tooltip

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

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:

Crossbrowsing