Hover for Tooltip
A Vue component that creates an animated tooltip with a dynamic hover effect.
| Prop | Type | Default | Description |
|---|---|---|---|
offset | Number | 0 | Adjust offset for tooltip position. |
class | String | undefined | Additional CSS classes to apply to the container. |
| Slot | Description |
|---|---|
default | Content to be displayed inside the main element. |
tooltip | Content to be displayed inside the tooltip. |
You can customize the AnimatedTooltip component in several ways:
tooltip slot to define the content of the tooltip.<style> section to modify the animations and appearance:
--transition: Controls the timing function of the animations.--rotate: Controls the rotation of the tooltip (set dynamically).--translateX: Controls the horizontal translation of the tooltip (set dynamically).The component uses SCSS for styling. Key style features include:
You can further customize the appearance by modifying the SCSS in the <style> section of the component.