## Tooltip

The Tooltip is a directive that adds a message to a Tooltip component and binds it to the Angular CDK.
Demo
Single line tooltip. Hover over me!
Title & Message Tooltip
Multi line tooltip. Hover over me!
Required Imports
import { TooltipModule } from 'nextsapien-component-lib';
Properties

Type | Name | Description | Data type | Required | Default | Demo
--- | --- | --- | --- | --- | --- | ---
Input | libTooltip | Sets the tooltip content. | SafeHTML | true | n/a | n/a
Input | delayTime | Sets time to wait to display tooltip in milliseconds. | number | false | 1000 |
Input | directionPreference | Where to display tooltip in reference to the target | TooltipDirectionPreference | false | TooltipDirectionPreference.Bottom |
Input | title | Tooltip title | SafeHTML | false | null | n/a
Input | hideIcon | hide tooltip icon | boolean | false | false | n/a
Public | mouseEnter() | Event listener for mouse enter, triggers the tooltip to be shown after a delay.
Public | mouseOut() | Event listener for mouse leave, hides the tooltip.
Public | onClick() | Event listener for mouse click, hides the tooltip when clicked.

CSS Properties

Name | Description | Default
--- | --- | ---
--tooltip-bg-color | Default tooltip background color | `#4f4150`
--message-card-bg-color | Default tooltip background linear-gradient | `linear-gradient(160.44deg, #8a75da 1%, #574e96 20%, #736980 50%, #332e39 80%)`
--message-card-bg-transparent-color | Default tooltip background radial-gradient | `radial-gradient(#fe3c72, #fff0 55%)`

Example usage
`{{ tooltipCode }}`