COMPONENTS
Clickable tooltip
A tooltip is a brief, informative message that appears when a user hovers over or focuses on an element within a graphical user interface.It provides explanations or extra context for the item, enhancing usability and guidance.
Demo
Code
Documentation
Installation
Follow these steps to install and use the ip-tooltip component in your project.
Step 1
Install the ip-tooltip component as a dependency in your project:
Step 2
Import the module into your script file:
Usage
To use this component, add the properties as attributes.
| Property | Attribute | Necessity | Description | Type | Default |
|---|---|---|---|---|---|
| tooltipTrigger | tooltip-trigger | Required | The button that will display the tooltip | string | Undefined |
| tooltipContent | tooltip-content | Required | The text that will be displayed in the tooltip | string | Undefined |
| type | type | Optional | Determines if the tooltip should appear on click or hover | 'click' | 'hover' | hover |
| tooltipBtnClose | tooltip-btn-close | Optional | If you need to add a close button in the tooltip | boolean | false |
| tooltipTitle | tooltip-title | Optional | The title of the tooltip if you want to add a title | string | Undefined |
| tooltipBtn1 | tooltip-btn-1 | Optional | If you need to add a button in the tooltip | string | Undefined |
| tooltipBtn2 | tooltip-btn-2 | Optional | If you need to add a second button in the tooltip | string | Undefined |
| btn1AriaLabel | btn-1-aria-label | Optional | ARIA label for the first button, required for accessibility | string | Undefined |
| btn2AriaLabel | btn-2-aria-label | Optional | ARIA label for the second button, required for accessibility | string | Undefined |
Example
Customization
We have a set of predefined variables used to customize the tooltip:
--primary-color--secondary-color
Also, We have a set of parts that could be used to customize accordingly:
close-btn: for the close button if it existtooltip-btn1: for the first button if it existtooltip-btn2: for the second button if it existtooltip-content: for tooltip-contenttooltip-trigger: for the trigger button
To update the values use the following:
Listening to Events
To listen to events emitted by ip-tooltip, open your browser's console.Event details will be displayed in the console when the buttons are interacted with.