Tooltipster

For use with projects built with the Say Hello Roots Theme for WordPress.

Current version: 3rd February 2021

Install dependencies

npm i -S tooltipster

JavaScript

import 'tooltipster';

(function ($) {
    /**
     * Tooltips with specific function/appearance
     * for the myflugbasis screen/s
     * @return {void}
     */
    var doTooltips = function () {
        if ($.fn.tooltipster) {
            try {
                $('[data-tooltip]').tooltipster('destroy');
            } catch (e) {
                // nobody cares
            }

            $('[data-tooltip]')
                .tooltipster({
                    theme: 'c-tooltipster--MYPROJECT',
                    delay: 0,
                    distance: 2,
                    maxWidth: 200,
                    side: 'top',
                    trigger: 'custom',
                    triggerOpen: {
                        mouseenter: true,
                        touchstart: true,
                    },
                    triggerClose: {
                        mouseleave: true,
                        click: true,
                        scroll: true,
                        tap: true,
                    },
                })
                .show();
        }
    };
    $(document).on('ready.tooltips', doTooltips);
})(jQuery);

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';

:root {
    --tooltipster-background-color: var(--color-gray-dark);
    --tooltipster-border-color: var(--color-gray-dark);
    --tooltipster-border-width: 1px;
    --tooltipster-border-style: solid;
    --tooltipster-border: var(--tooltipster-border-width) var(--tooltipster-border-style)
        var(--tooltipster-border-color);
    --tooltipster-arrow-border-color: var(--tooltipster-background-color);
    --tooltipster-arrow-background-color: var(--tooltipster-background-color);
    --tooltipster-box-padding: var(--unit-xxsmall) var(--unit-small) var(--unit-xsmall);
}

.tooltipster-base.c-tooltipster--MYPROJECT {
    .tooltipster-box {
        background-color: var(--tooltipster-background-color);
        border-color: var(--tooltipster-border-color);
        border-width: var(--tooltipster-border-width);
        padding: var(--tooltipster-box-padding);
    }

    .tooltipster-content {
        // text size and font etc
    }

    &.tooltipster-sidetip.tooltipster-top {
        .tooltipster-arrow-background {
            border-top-color: var(--tooltipster-arrow-background-color); // yes, background
        }
        .tooltipster-arrow-border {
            border-top-color: var(--tooltipster-arrow-border-color);
        }
    }

    &.tooltipster-sidetip.tooltipster-bottom {
        .tooltipster-arrow-background {
            border-bottom-color: var(--tooltipster-arrow-background-color); // yes, background
        }
        .tooltipster-arrow-border {
            border-bottom-color: var(--tooltipster-arrow-border-color);
        }
    }
}