Tooltip

Display prompt information for mouse hover.

Under the hood we use tooltip from element-plus. But style it to our design

Default Type

Tooltip has 9 placements.

Use prop content to set the display content when hover. The prop placement determines the position of the tooltip. Its value is [orientation]-[alignment] with four orientations top, left, right, bottom and three alignments start, end, null, and the default alignment is null. Take placement="left-end" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.

<template>
  <div class="grid grid-cols-10">
    <div class="col-span-2" />

    <div class="col-span-6 flex space-x-3 justify-center">
      <HcTooltip
        placement="top-start"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Top start
          </HcButton>
        </template>
      </HcTooltip>

      <HcTooltip
        placement="top"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Top
          </HcButton>
        </template>
      </HcTooltip>

      <HcTooltip
        placement="top-end"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Top end
          </HcButton>
        </template>
      </HcTooltip>
    </div>

    <div class="col-span-2" />

    <div class="col-span-2 flex flex-col space-y-2">
      <HcTooltip
        placement="left-start"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Left start
          </HcButton>
        </template>
      </HcTooltip>
      <HcTooltip
        placement="left"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Left
          </HcButton>
        </template>
      </HcTooltip>
      <HcTooltip
        placement="left-end"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Left end
          </HcButton>
        </template>
      </HcTooltip>
    </div>

    <div class="col-span-6" />

    <div class="col-span-2 flex flex-col space-y-2">
      <HcTooltip
        placement="right-start"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Right start
          </HcButton>
        </template>
      </HcTooltip>

      <HcTooltip
        placement="right"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Right
          </HcButton>
        </template>
      </HcTooltip>

      <HcTooltip
        placement="right-end"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Right end
          </HcButton>
        </template>
      </HcTooltip>
    </div>

    <div class="col-span-2" />

    <div class="col-span-6 flex space-x-3 justify-center2">
      <HcTooltip
        placement="bottom-start"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Bottom start
          </HcButton>
        </template>
      </HcTooltip>

      <HcTooltip
        placement="bottom"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Bottom
          </HcButton>
        </template>
      </HcTooltip>

      <HcTooltip
        placement="bottom-end"
        content="Lorem ipsum dolor sit amet, consectetur"
      >
        <template #reference>
          <HcButton
            type="outlined"
            class="!px-3"
          >
            Bottom end
          </HcButton>
        </template>
      </HcTooltip>
    </div>

    <div class="col-span-2" />
  </div>
</template>

<script lang="ts" setup>
import { HcTooltip } from '@deeepvision/hope-component-kit';
</script>

Themes

Tooltip has three built-in themes: darkblue | lightpink | error.

Set props effect to modify theme, and the default value is dark.

TIP

To use customized theme, you will have to known where your tooltip is rendered into, if your tooltip is rendered into the root element, you will need to set the css rule globally.

It is recommended that not using linear gradient background color when you using customized theme and showing the arrow at the same time, because the popup arrow and the content are two different elements, the popup arrow's style needs to be set individually, and when it comes to the gradient background color, it might seem a little bit weird.

<template>
  <div class="grid grid-cols-4 gap-4">
    <HcTooltip
      content="Lorem ipsum dolor sit amet, consectetur"
      effect="darkblue"
    >
      <template #reference>
        <HcButton
          type="outlined"
          class="!px-3"
        >
          darkblue
        </HcButton>
      </template>
    </HcTooltip>

    <HcTooltip
      content="Lorem ipsum dolor sit amet, consectetur"
      effect="lightpink"
    >
      <template #reference>
        <HcButton
          type="outlined"
          class="!px-3"
        >
          lightpink
        </HcButton>
      </template>
    </HcTooltip>

    <HcTooltip
      content="Lorem ipsum dolor sit amet, consectetur"
      effect="error"
    >
      <template #reference>
        <HcButton
          type="outlined"
          class="!px-3"
        >
          error
        </HcButton>
      </template>
    </HcTooltip>

    <HcTooltip
      content="Lorem ipsum dolor sit amet, consectetur"
      effect="customized"
    >
      <template #reference>
        <HcButton
          type="outlined"
          class="!px-3"
        >
          customized
        </HcButton>
      </template>
    </HcTooltip>
  </div>
</template>

<script lang="ts" setup>
import { HcTooltip } from '@deeepvision/hope-component-kit';
</script>

<style>
.el-popper.is-customized {
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>

Custom content

Customize tooltip content. Override prop content by adding a slot named default.

<template>
  <div class="flex items-center">
    <HcTooltip effect="error">
      <template #reference>
        <HcButton type="danger">
          Hover me
        </HcButton>
      </template>
      <template #default>
        <div class="p-2 text-body-1 max-w-[300px] rounded-sm">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
          in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
      </template>
    </HcTooltip>
  </div>
</template>

<script lang="ts" setup>
import { HcTooltip } from '@deeepvision/hope-component-kit';
</script>

Icon toltip

Use prop iconName to set icon as trigger content. Use props iconClass to change icon styles. Override prop iconName by adding a slot named icon.

<template>
  <div class="flex items-end">
    <HcTooltip
      icon-name="share"
      icon-class="text-primary h-8 w-8"
      content="Share"
    />

    <HcTooltip
      class="ml-10"
      content="Settings"
    >
      <template #icon>
        <HcIcon
          name="settings"
          class="text-primary h-8 w-8"
        />
      </template>
    </HcTooltip>
  </div>
</template>

<script lang="ts" setup>
import { HcTooltip } from '@deeepvision/hope-component-kit';
</script>

Other states

Use prop show-after to set delay of appearance, in millisecond.

Use prop disabled to determinate whether Tooltip is disabled.

<template>
  <div class="flex items-end">
    <HcTooltip
      content="Show after 400 milliseconds"
      :show-after="400"
    >
      <template #reference>
        <HcButton>
          Show after
        </HcButton>
      </template>
    </HcTooltip>

    <HcTooltip
      content="User shouldn't see this content"
      class="ml-10"
      disabled
    >
      <template #reference>
        <HcButton>
          Disabled
        </HcButton>
      </template>
    </HcTooltip>
  </div>
</template>

<script lang="ts" setup>
import { HcButton, HcTooltip } from '@deeepvision/hope-component-kit';
</script>

Props

Property	Type	Values	Description	Default
placement	Placement	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	position of Tooltip	top
iconName	String	String	reference icon
iconClass	String	String	custom class for reference icon
triggerCustomClass	String	String	custom class if trigger content
content	String	String	display content, can be overridden by slot#content
content	String	String	display content, can be overridden by slot#content
rawContent	Boolean	Boolean	whether content is treated as HTML string
effect	String	darkbluelightpinkerror	tooltip theme	darkblue
disabled	Boolean	Boolean	whether Tooltip is disabled	false
showAfter	Number	Number	delay of appearance, in millisecond	0

Slots

Property	Values	Description
reference	-	Tooltip triggering & reference element
icon	-	Tooltip triggering icon
default	-	Ccustomize content

Events

Property	Type	Values	Description	Default
trigger-click	Function	event - MouseEvent	triggers when click on reference icon

Tooltip #

Default Type #

Themes #

Custom content #

Icon toltip #

Other states #

Props #

Slots #

Events #