##
Moving Tooltip Plugin

Range slider library has a standalone Moving Tooltip Plugin. The plugin adds a moving tooltip to each pointer. You can change the tooltip color, size, and distance to pointer.

Download the latest tcrs-moving-tooltip.min.js script from GitHub and add it to the HTML before the toolcool-range-slider.min.js script.

Check out the following basic example:

    <tc-range-slider
      value1="20"
      value2="50"
      value3="80"
      round="0"

      moving-tooltip="true"
      moving-tooltip-distance-to-pointer="40"
      moving-tooltip-width="35"
      moving-tooltip-height="30"
      moving-tooltip-bg="#721d82"
      moving-tooltip-text-color="#efefef"
      moving-tooltip-units="%">
    </tc-range-slider>

    <!-- The plugin should be included before the core library. -->
    <script src="tcrs-moving-tooltip.min.js"></script>
    <script src="toolcool-range-slider.min.js"></script>

The moving-tooltip-distance-to-pointer attribute can also be negative:

    <tc-range-slider
      value1="20"
      value2="50"
      value3="80"
      round="0"

      moving-tooltip="true"
      moving-tooltip-distance-to-pointer="-40"
      moving-tooltip-width="35"
      moving-tooltip-height="30"
      moving-tooltip-bg="#387ec7"
      moving-tooltip-text-color="#efefef"></tc-range-slider>

The plugin is also available on the jsDelivr CND:

    <tc-range-slider
      value1="30"
      value2="50"
      value3="70"
      round="0"

      moving-tooltip="true"
      moving-tooltip-distance-to-pointer="40"
      moving-tooltip-width="35"
      moving-tooltip-height="30"
      moving-tooltip-bg="#721d82"
      moving-tooltip-text-color="#efefef"></tc-range-slider>

    <!-- The plugin should be included before the core library. -->
    <script
      src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/plugins/tcrs-moving-tooltip.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/toolcool-range-slider.min.js"></script>

In bundlers like Webpack and esbuild you can use it like this:

    import 'toolcool-range-slider/dist/plugins/tcrs-moving-tooltip.min.js';
    import 'toolcool-range-slider';

    // any code here...

HTML Property | Default Value | Possible Values | API Property
--- | --- | --- | ---
moving-tooltip | true | true or false | movingTooltip
moving-tooltip-distance-to-pointer | 40 | number | distanceToPointer
moving-tooltip-width | 35 | number | tooltipWidth
moving-tooltip-height | 30 | number | tooltipHeight
moving-tooltip-bg | #475569 | color | tooltipBg
moving-tooltip-text-color | #fff | color | tooltipTextColor
moving-tooltip-units | empty string | text | tooltipUnits
moving-tooltip-units-type | empty string | “” or “prefix” | tooltipUnitType
- | undefined | function | formatTooltipValue

> 📌 You can add your own css customizations using CSS Links or using addCSS API.

The tooltip plugin settings can be changed using the API:

    const $slider = document.getElementById('slider-1');
    $slider.movingTooltip = true; // or false
    $slider.distanceToPointer = 50; // px
    $slider.tooltipWidth = 50; // px
    $slider.tooltipHeight = 50; // px
    $slider.tooltipBg = '#000';
    $slider.tooltipTextColor = '#efefef';
    $slider.tooltipUnits = '{% page-content %}#x27;;
    $slider.tooltipUnitType = 'prefix';
    $slider.formatTooltipValue = (value) => {
        return Number(value).toLocaleString('en-US', { minimumFractionDigits: 2 });
    };

TypeScript example:

    import { IMovingTooltipPlugin } from 'toolcool-range-slider';

    const $slider = document.getElementById('slider-1') as IMovingTooltipPlugin;

    $slider.movingTooltip = true; // or false
    $slider.distanceToPointer = 50; // px
    $slider.tooltipWidth = 50; // px
    $slider.tooltipHeight = 50; // px
    $slider.tooltipBg = '#000';
    $slider.tooltipTextColor = '#efefef';
    $slider.tooltipUnits = '{% page-content %}#x27;;
    $slider.tooltipUnitType = 'prefix';
    $slider.formatTooltipValue = (value?: (value: string|number|undefined) => string) => {
        return Number(value).toLocaleString('en-US', { minimumFractionDigits: 2 });
    };

> 📌 An example page with the source code can be found here.

Previous
Right To Left Support
Next
Marks Plugin