tooltip plugin basic functionality added

docs/plugin-development.md

@@ -12,7 +12,22 @@ Plugins are the building blocks of ProductLed. They are responsible for creating
 
 To get started, create a new folder in packages/@productled folder with the name of the plugin.
 
-Now create a file called `package.json` with the following content:
+in the solution root's package.json add an new entry to the workspaces array with the path to the new plugin folder.
+
+```json
+{
+    ...
+  "workspaces": [
+    "packages/@productled/core",
+    "packages/@productled/spotlights",
+    "packages/samples/react-sample",
+    <add new plugin path here>
+  ],
+    ...
+}
+```
+
+Now in the new plugin folder, create a file called `package.json` with the following content:
 
 ```json
 {
@@ -37,7 +52,7 @@ Now create a file called `package.json` with the following content:
 }
 ```
 
-Create a `tsconfig.json` file with the following content:
+In the new plugin folder, create a `tsconfig.json` file with the following content:
 
 ```json
 {
@@ -61,7 +76,7 @@ Create a `tsconfig.json` file with the following content:
 
 ### Create the Source Files
 
-Create a `src` folder and add an `index.ts` and `pluginClass.ts` file with the following content:
+In the new plugin folder, create a `src` folder and add an `index.ts` and `pluginClass.ts` file with the following content:
 
 `index.ts`
 
@@ -108,9 +123,9 @@ create(element: HTMLElement, conf: any, theme: Theme): void {
 
 The `create` method takes three parameters: `element`, `conf`, and `theme`. Here's what each parameter represents:
 
-- **`element`** is of type `HTMLElement`. It represents the HTML element on which the plugin will create the effect. 
+- **`element`** is of type `HTMLElement`. It represents the HTML element on which the plugin will create the effect.
 - **`conf`** is of type `any`. It represents the configuration object that contains properties specified in the `productled-config.json` file. These properties will be used to customize the effect created by the plugin.
-- **`theme`** is of type `Theme`. It represents the theme object that will be used to style the effect created by the plugin. 
+- **`theme`** is of type `Theme`. It represents the theme object that will be used to style the effect created by the plugin.
 
 In summary, the `create` method is responsible for creating an effect on a specified HTML element. It uses the provided configuration and theme to customize the spotlight's appearance and behavior.
 

docs/plugins/index.md

@@ -21,15 +21,16 @@ npm install @productled/spotlights
 Register the plugin with Productled Core at application start. e.g., in file: index.tsx
 
 ``` typescript
-productled.registerPlugin(new <PluginClass>());
+productled.registerPlugins(...plugins: Plugin[]);
 ```
 
 e.g.,
 
 ``` typescript
-productled.registerPlugin(new SpotlightPlugin());
+productled.registerPlugins(new SpotlightPlugin());
 ```
 
 ## Available Plugins
 
-- [Spotlights Plugin documentation](spotlights)
+- [Spotlight Plugin documentation](spotlight)
+- [Tooltip Plugin documentation](tooltip)

docs/plugins/tooltip.md

@@ -0,0 +1,70 @@
+---
+title: Spotlights
+parent: Plugins
+nav_order: 2
+---
+
+# Tooltip Plugin Documentation
+
+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:
+
+``` bash
+npm install @productled/tooltip
+```
+
+Then, register the Tooltip plugin in your application file:
+
+```typescript
+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.registerPlugin(new TooltipPlugin());
+```
+
+## Configuring Tooltips
+
+Once installed, configure tooltips through the productled-conf.json file.
+
+Example configuration for a tooltip:
+
+```json
+{
+    "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.

package.json

@@ -4,7 +4,8 @@
   "workspaces": [
     "packages/@productled/core",
     "packages/@productled/spotlights",
-    "packages/samples/react-sample"
+    "packages/samples/react-sample",
+    "packages/@productled/tooltip"
   ],
   "dependencies": {},
   "devDependencies": {

packages/@productled/core/src/Productled.ts

@@ -83,13 +83,15 @@ class Productled {
    * @param {Plugin} plugin - The plugin to register
    * @returns {void}
    */
-  public registerPlugin(plugin: Plugin) {
-    const pluginName = plugin.Name;
-    // Add the plugin to the plugin store
-    this.pluginStore.addPlugin(plugin);
-    // Get the hooks for the plugin and add them to the hook store
-    const hooks = this.configStore.getHooks(pluginName);
-    this.hookStore.addHooks(hooks, pluginName);
+  public registerPlugins(...plugins: Plugin[]) {
+    plugins.forEach((plugin) => {
+      const pluginName = plugin.Name;
+      // Add the plugin to the plugin store
+      this.pluginStore.addPlugin(plugin);
+      // Get the hooks for the plugin and add them to the hook store
+      const hooks = this.configStore.getHooks(pluginName);
+      this.hookStore.addHooks(hooks, pluginName);
+    });
   }
 
 }