This component is designed to display a tooltip when its default slot gets hovered.
Receive these as Properties (props):
side:
Type: string
Required: true
Description: Specifies the side of the tooltip when it is displayed. Valid values are top, right, bottom, and left.
bgColor:
Type: string
Default: #0d1117
Description: Used as a CSS color value to define the background color of the tooltip.
borderWidth:
Type: string
Default: 1px
Description: Used as a CSS sizing for the tooltip border. Accepts values like 2px or 5%.
borderColor:
Type: string
Default: #30363d
Description: Used as a CSS color value to define the color of the tooltip border stroke.
Receive these as Slots:
Default Slot: Specify the HTML content that is initially displayed. This content will trigger the appearance of the tooltip on hover.
Tooltip Slot: Specify the HTML content that is displayed in the tooltip when the default content is hovered.
Example Usage:
<Tooltip
:side="'top'"
:bgColor="'#ffcc00'"
:borderWidth="'2px'"
:borderColor="'#ff9900'"
>
<!-- Content for the default slot -->
<p>This is the default content.</p>
<!-- Content for the tooltip slot -->
<template v-slot:tooltip>
<p>This is the tooltip content.</p>
</template>
</Tooltip>
If you have any questions, feel free to ask by leaving a comment.
Description 📚
This component is designed to display a tooltip when its default slot gets hovered.
Receive these as Properties (props):
side
:bgColor
:borderWidth
:borderColor
:Receive these as Slots:
Example Usage:
If you have any questions, feel free to ask by leaving a comment.