Tooltip Plugin
The Tooltip Plugin provides a way to display helpful tooltips to users when they hover over specific elements in your application. This guide covers the installation and configuration steps to get the Tooltip plugin working with Productled.
Installation
Ensure that the Productled core is installed before adding the Tooltip plugin. If you haven’t installed the core library, follow the Productled Installation Guide.
To install the Tooltip plugin, run:
npm install @productled/tooltip
Then, register the Tooltip plugin in your application file:
import productledConf from './productled-config.json';
import { Productled } from '@productled/core';
import { TooltipPlugin } from '@productled/tooltip';
// Get the Productled instance
const productled = Productled.getInstance();
// Load the configuration
productled.loadConfig(productledConf);
// Register the plugin
productled.registerPlugins(new TooltipPlugin());
Configuring Tooltips
Once installed, configure tooltips through the productled-conf.json file.
Example configuration for a tooltip:
{
"hooks": [
{
"plugin": "tooltip",
"trigger": {
"url": "/page/subpage*",
"selector": ".hover-me",
"frequency": "always"
},
"config": {
"title": "Tooltip Title",
"description": "This is a helpful tooltip description.",
"link": "https://learn-more-link.com",
}
}
]
}
Explanation of Configuration:
- plugin: Specifies the tooltip plugin.
- trigger: Defines the conditions for displaying the tooltip (e.g., URL, element selector, frequency).
- config: Contains the tooltip’s title, description, link, and positioning. Using Tooltips
After configuring the tooltips, the Productled core automatically handles the display based on the defined conditions. You can create multiple tooltips for different elements across your application.