Tooltip plugin for marker.js Live
This plugin adds tooltip functionality to your instance of marker.js Live.
It displays notes
field of markers as a tooltip
using Tippy.js
Installation
Make sure you have marker.js Live installed. Then run
npm install mjslive-plugin-tooltip
or
yarn add mjslive-plugin-tooltip
Usage
To add the functionality to marker.js Live instance simply create a new instance of Tooltip
, configure it and add it via the addPlugins()
method.
import { Tooltip } from 'mjslive-plugin-tooltip';
...
const tooltip = new Tooltip();
tooltip.followCursor = true;
markerView.addPlugin(tooltip);
markerView1.show(markerViewState);
Configuration
Tooltip plugin object has the following properties:
showArrow
- when set totrue
displays tooltip's tip (arrow). Defaults tofalse
.allowHTML
- if set totrue
assumes that the content ofnotes
is HTML and renders it as is. Warning: make sure you trust the source of your markers before turning this on. Default -false
.followCursor
- when set totrue
the tooltip will follow mouse cursor. Defaults tofalse
.theme
- can be use to specify custom Tippy theme. See Tippy.js documentation for details.notesParser
- function to parse notes if needed (eg. Markdown parser). When set is called before assigning the tooltip content. Takes string as an argument and should return a string.
Credits
This plugin's functionality relies on Tippy.js by atomiks.
License
This marker.js Live plugin is distributed under the MIT License. See LICENSE file for details.