## 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](https://github.com/mzusin/toolcool-range-slider/blob/main/dist/plugins/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:
```html
```
The **moving-tooltip-distance-to-pointer** attribute can also be negative:
```html
```
The plugin is also available on the [jsDelivr CND](https://www.jsdelivr.com/package/npm/toolcool-range-slider):
```html
```
In bundlers like [Webpack](https://webpack.js.org/) and [esbuild](https://esbuild.github.io/) you can use it like this:
```js
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 |
> :pushpin: You can add your own css customizations using [CSS Links](/pages/css-links.html) or using [addCSS](/pages/add-css-api.html) API.
The tooltip plugin settings can be changed using the API:
```js
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 = '$';
$slider.tooltipUnitType = 'prefix';
$slider.formatTooltipValue = (value) => {
return Number(value).toLocaleString('en-US', { minimumFractionDigits: 2 });
};
```
TypeScript example:
```typescript
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 = '$';
$slider.tooltipUnitType = 'prefix';
$slider.formatTooltipValue = (value?: (value: string|number|undefined) => string) => {
return Number(value).toLocaleString('en-US', { minimumFractionDigits: 2 });
};
```
> :pushpin: An example page with the source code can be found [here](https://github.com/mzusin/toolcool-range-slider/blob/main/examples/28-moving-tooltip-plugin.html).