Tooltip Component

[babak-majd]

Description 📚

• 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.

[Amirali-Yavari]

hi daisyUI have this component and its developed very well @babak-x