Reactive tooltips for Meteor

NOTE: This is a simple fork of lookback:tooltips, without the coffeescript dependency or the version pinning.

---

Forget about adding clunky Bootstrap packages. The cunneen:tooltips package provides tooltips "The Meteor Way" – the reactive way! Barebones, minimal and functional.

Install

meteor add cunneen:tooltips

Usage

You can now use the tooltips (singleton) template in your layouts/templates.

1<template name="main">
2  <p>Some content.</p>
3
4  {{ > tooltips }}
5</template>

You must style the show and hide classes on a tooltip.

Commonly, you would give the tooltip element these basic styles (see the _tooltip.scss file in the example folder):

1.tooltip {
2  z-index: 1001;
3  pointer-events: none;
4  transition: opacity .1s ease-out;
5  opacity: 0;
6}
7
8.tooltip.hide {
9  opacity: 0;
10}
11
12.tooltip.show {
13  opacity: 1;
14}

Basic

Attach a tooltip to an element with the data-tooltip data attribute:

1<template name="main">
2<p>Some content.</p>
3
4<p>
5  <button data-tooltip="I'm a tooltip!">A tooltip trigger</button>
6</p>
7
8{{ > tooltips }}
9</template>

The tooltip will show when hovering over the button.

Markup

You can embed markup in your tooltips as well:

1<button data-tooltip="I'm a tooltip with <strong>markup!</strong>">A tooltip trigger</button>

Or refer to an external element containing the markup:

1<div id="my-element" aria-hidden="true">
2  <strong>I'm a tooltip with some more <em>markup!</em></strong>
3</div>
4
5<button data-tooltip-element="#my-element">A tooltip trigger</button>

Remember to hide the external tooltip elements with CSS!

Direction

You may specify the direction of the tooltip around the element as well, with the data-tooltip-direction attribute.

1<template name="main">
2<p>Some content.</p>
3
4<p>
5<button data-tooltip="I'm a tooltip to the left!" data-tooltip-direction="w">A tooltip trigger</button>
6</p>
7
8{{ > tooltips }}
9</template>

The data-tooltip-direction attribute takes these values:

• n - Top (default)
• s - Bottom
• e - Right
• w - Left

Offsets

Tooltips support offsets from their element when you specify the data-tooltip-top and data-tooltip-left data attributes on the element.

1<template name="main">
2<p>Some content.</p>
3
4<p>
5<button data-tooltip="I'm a tooltip!" data-tooltip-top="50">A tooltip trigger</button>
6</p>
7
8{{ > tooltips }}
9</template>

The tooltip in the example above will be offset 50 pixels to the north (upwards on screen).

Both attributes takes positive and negative numbers, intepreted as pixels.

Triggers

Tooltips support different triggers, other then on hover, which is the default. Supported triggers are:

• hover
• click
• focus
• manual

To use the manual trigger, trigger these events on the element:

• tooltips:show
• tooltips:hide
• tooltips:toggle

1<template name="main">
2<p>Some content.</p>
3
4<p>
5  <button data-tooltip="Tooltip on Click" data-tooltip-trigger="click">Click Me!</button>
6</p>
7
8{{ > tooltips }}
9</template>

Please see the example app for more examples.

Styling

You can use data-tooltip-classes to define custom classes for your tooltip. It adds additional classes to the .tooltip element.

1<p>
2  <button data-tooltip="I have custom classes" data-tooltip-classes="custom-class another-custom-class">Hurrah for styling!</button>
3</p>

The following styles that are included are inlined on the tooltip element itself:

1<div class="tooltip tooltip--top" style="position: absolute; top: 100px; left: 100px;">
2<div class="inner">Content</div>
3</div>

Helper classes

The package adds some helper classes to the tooltip element, for styling and transitioning.

The main tooltip element has these classes:

• tooltip
• tooltip--top, tooltip--bottom, tooltip--left, tooltip--right – For the tooltip direction. Usable for adding CSS arrows and other stuff to a tooltips, depending on its direction. Defaults to tooltip--top.

The content wrapper has the inner class. Usable for separate styling as well as for transitioning.

When hovering over the triggering element, a show class will be added to the main tooltip element. When the tooltip is inactive, it'll have the hide class.

Disabling for other viewports

It's possible to completely disable the tooltips, or just for a certain viewport. By setting the Tooltips.disable option (defaults to false), you can pass in true to disable all tooltips, or a matchMedia string which disables all tooltips for that viewport.

1// Disable for all
2Tooltips.disable = true;
3
4// Disabling for all touch devices:
5// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
6var isTouch = !!('ontouchstart' in window) || !!(window.DocumentTouch && document instanceof DocumentTouch);
7Tooltips.disable = isTouch;
8
9// Disable for devices/browsers over 500 px in width
10Tooltips.disable = '(min-width: 500px)';
11
12// Disable for devices/browser below 400 px in width
13Tooltips.disable = '(max-width: 400px)';

You can also disable individual tooltips directly from the markup, by setting the data-tooltip-disable attribute:

1<!-- Disables *this* tooltip for browsers below 400px in width. -->
2<button data-tooltip="I'm a tooltip!" data-tooltip-disable="(max-width: 400px)">A tooltip trigger</button>

API

This packages exposes an API in the Tooltips namespace on the client:

1// Set a tooltip. Second argument is optional. If passed, it'll be
2// the CSS position for the tooltip.
3Tooltips.set('Text', {top: 10, left: 30});
4
5// Get the tooltip. Creates a reactive dependency, and returns an object.
6var tip = Tooltips.get();
7
8/*
9=>
10  tip.text == 'Text';
11  tip.css == {top: 0, left: 0};
12  tip.direction == 'tooltip--top';
13*/
14
15// Disable all tooltips. Can be `true|false` or a `matchMedia` query.
16// Defaults to false.
17Tooltips.disable = true;
18
19// Set position of the tooltip. Second argument is optional. If passed, it'll
20// be the direction of the tooltip, and must be one of `n`, `s`, `e`, `w`
21// (north, south, east, west).
22Tooltips.setPosition({top: 10, left: 30}, 'n');
23
24// Hide all tooltips
25Tooltips.hide();

Version history

Contributions

Contributions are welcome. Please open issues and/or file Pull Requests.

---