Tooltip

The tooltip component can be used to enhance your website’s interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component

Examples

Directive

Code

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <Demo is-row>
    <component :is="BaseButton" v-tooltip="{ content: 'Hi!' }">Tootlip!</component>
    <component :is="BaseButton" v-tooltip="'Hello!'">Tootlip!</component>
  </Demo>
</template>

Component

Code

<script setup lang="ts">
import { BaseButton, BaseTooltip } from '@point-hub/papp'
</script>

<template>
  <Demo is-row>
    <component :is="BaseTooltip" content="Hello World">
      <component :is="BaseButton">Tootlip!</component>
    </component>
    <component :is="BaseTooltip">
      <component :is="BaseButton">Tootlip!</component>
      <template #content>
        <h2>Hello World</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam reiciendis minus itaque
          incidunt architecto aliquid! Esse culpa animi vero quidem cumque laboriosam quis,
          blanditiis obcaecati fugiat, excepturi iure, necessitatibus voluptate!
        </p>
      </template>
    </component>
  </Demo>
</template>

Global

Code

<script setup lang="ts">
import { BaseButton } from '@point-hub/papp'
</script>

<template>
  <Demo is-row>
    <base-tooltip content="Hello World">
      <component :is="BaseButton">Tootlip!</component>
    </base-tooltip>
    <base-tooltip>
      <component :is="BaseButton">Tootlip!</component>
      <template #content>
        <h2>Hello World</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam reiciendis minus itaque
          incidunt architecto aliquid! Esse culpa animi vero quidem cumque laboriosam quis,
          blanditiis obcaecati fugiat, excepturi iure, necessitatibus voluptate!
        </p>
      </template>
    </base-tooltip>
  </Demo>
</template>

Tooltip API

Props

Name	Type	Default	Description
content	string		Tooltip content.
interactive	boolean	true	Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside without hiding.
zIndex	number	9999	Specifies the z-index CSS on the root popper node.

Slot

#default slot for rendering tooltip trigger element

#content slot for rendering tooltip content