Tooltips - markhowellsmead/helpers GitHub Wiki

Tooltipster

• http://iamceege.github.io/tooltipster/

Using NPM

npm i tooltipster -D

JavaScript

if ($.fn.tooltipster) {
	$('[data-tooltip]').tooltipster({
		theme: 'tooltipster-borderless',
		delay: 0,
		distance: 2,
		maxWidth: 200,
		side: 'top',
		trigger: 'custom',
		triggerOpen: {
			mouseenter: true,
			touchstart: true
		},
		triggerClose: {
			mouseleave: true,
			click: true,
			scroll: true,
			tap: true
		}
	});
}

SCSS

/*
 * Import SCSS from the 'tooltipster' folder in node_modules
 * Make sure that the node_modules folder is included in your includePaths for gulp-sass
 *
 * .pipe(sass({
 * 		includePaths: ['./node_modules/']
 * })
 */

@import 'tooltipster/dist/css/tooltipster.bundle.min';
@import 'tooltipster/src/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless';
.tooltipster {
	&-box {
		font-size: var(--font-size-xsmall);
		background-color: c(gray, dark2);
		color: c(white);
		padding: var(--unit-small);
	}

	&-sidetip .tooltipster-content {
		padding: 0;
	}
}