Tooltips
Mark Howells-Mead edited this page Oct 9, 2019
·
1 revision
npm i tooltipster -D
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
}
});
}
/*
* 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;
}
}
Mark Howells-Mead | https://permanenttourist.ch and https://sayhello.ch/ | Wiki since 2016
Use this code freely, widely and for free. Provision of this code provides and implies no guarantee.
Please respect the GPL v3 licence, which is available via http://www.gnu.org/licenses/gpl-3.0.html