Tooltip

Default

Easily add a tooltip with the s-tooltip component, the content within the default slot is the parent element of the tooltip and the one that triggers to show or hide it

The tooltip slot is the content inside the tooltip

Code copied

<template>
  <div class="center">
    <s-tooltip>
      <s-button type="flat"> Do hover here </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
  </div>
</template>

Placement

Change the placement of the tooltip with the properties

• top
• bottom Default
• left
• right

Code copied

<template>
  <div class="center">
    <s-tooltip placement="left">
      <s-button type="border"> left </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip placement="top">
      <s-button type="border"> Top </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip placement="bottom">
      <s-button type="border"> Bottom </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip placement="right">
      <s-button type="border"> right </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
  </div>
</template>

Color

Use the color prop to change the base color of a component and supported child elements. See theme configuration for color and theme details.

Supported values:

• primary
• success
• danger
• warning
• dark
• RGB
• HEX

Code copied

<template>
  <div class="center">
    <s-tooltip>
      <s-button type="shadow"> Default </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip color="primary">
      <s-button type="flat"> Primary </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip color="success">
      <s-button color="success" type="flat"> Success </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip color="danger">
      <s-button color="danger" type="flat"> Danger </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip color="warn">
      <s-button color="warn" type="flat"> Warning </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip color="dark">
      <s-button color="dark" type="flat"> Dark </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip color="#7d33ff">
      <s-button color="#7d33ff" type="flat"> HEX </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip color="rgb(59,222,200)">
      <s-button color="rgb(59,222,200)" type="flat"> RGB </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
  </div>
</template>

Border

Change the style of the tooltip by adding a border and changing the color of the background with the border or border-thick property

Now the color property would change the color of the border

Code copied

<template>
  <div class="center">
    <s-tooltip type="border">
      <s-button type="transparent"> Do hover here </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip color="danger" type="border">
      <s-button color="danger" type="transparent"> Do hover here </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip color="#7d33ff" type="border-thick">
      <s-button color="#7d33ff" type="transparent"> Do hover here </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
  </div>
</template>

Square

Change the border-radius of the tooltip so that it is completely a rectangle

Code copied

<template>
  <div class="center">
    <s-tooltip shape="square">
      <s-button shape="square" type="flat"> Do hover here </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
  </div>
</template>

Circle

Change the border-radius of the tooltip to make it more circular

This property only applies when the tooltip has less than one line of text.

Code copied

<template>
  <div class="center">
    <s-tooltip shape="circle">
      <s-button shape="circle" type="flat"> Do hover here </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
  </div>
</template>

Shadow

Change the style of the tooltip to have a shadow and the background color

Code copied

<template>
  <div class="center">
    <s-tooltip type="shadow">
      <s-button type="flat"> Do hover here </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
  </div>
</template>

Not Arrow

In some cases you may need to remove the arrow from the tooltip for this you can use the not-arrow property

Code copied

<template>
  <div class="center">
    <s-tooltip :show-arrow="false" placement="left">
      <s-button type="border"> left not-arrow </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip :show-arrow="false">
      <s-button type="border"> Top not-arrow </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip :show-arrow="false" placement="bottom">
      <s-button type="border"> Bottom not-arrow </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip :show-arrow="false" placement="right">
      <s-button type="border"> right not-arrow </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
  </div>
</template>

Loading

Add an animation and loading style to the tooltip

Code copied

<template>
  <div class="center">
    <s-tooltip loading>
      <s-button type="flat"> Do hover here loading </s-button>
      <template #content> This is a beautiful button </template>
    </s-tooltip>
    <s-tooltip loading>
      <s-button type="flat"> Do hover here loading </s-button>
      <template #content />
    </s-tooltip>
  </div>
</template>

Content

We create the tooltip component in such a way that you have a lot of freedom to add anything and create all kinds of interface inside it.

Code copied

<template>
  <div class="center">
    <s-tooltip>
      <s-button type="gradient"> Whats is Sax Design? </s-button>
      <template #content>
        <div class="content-tooltip">
          <h4>Whats is Sax Design?</h4>
          <p>Sax Design is a framework of UI components created with Vuejs</p>
        </div>
      </template>
    </s-tooltip>
    <s-tooltip
      v-model="activeTooltip1"
      placement="bottom"
      type="shadow"
      trigger="click"
    >
      <s-button color="danger" @click="activeTooltip1 = !activeTooltip1">
        Click Delete User
      </s-button>
      <template #content>
        <div class="content-tooltip">
          <h4 class="center">Confirm</h4>
          <p>
            You are sure to delete this user, by doing so you cannot recover the
            data
          </p>
          <footer>
            <s-button color="danger" block @click="activeTooltip1 = false">
              Delete
            </s-button>
            <s-button
              type="transparent"
              color="dark"
              block
              @click="activeTooltip1 = false"
            >
              Cancel
            </s-button>
          </footer>
        </div>
      </template>
    </s-tooltip>
    <s-tooltip type="shadow" interactivity>
      <s-avatar>
        <img src="/avatars/avatar-5.png" alt="" />
      </s-avatar>
      <template #content>
        <div class="content-tooltip">
          <div class="body">
            <div class="text">
              Closed Tasks
              <span> 89 </span>
            </div>
            <s-avatar
              shape="circle"
              size="80"
              @click="activeTooltip1 = !activeTooltip1"
            >
              <img src="/avatars/avatar-5.png" alt="" />
            </s-avatar>
            <div class="text">
              Open Tasks
              <span> 8 </span>
            </div>
          </div>
          <footer>
            <s-button shape="circle" icon type="border">
              <s-icon  name="bxs:share-alt" />
            </s-button>
            <s-button shape="circle"> Message </s-button>
            <s-button shape="circle" icon type="border">
              <s-icon  name="bx:like" />
            </s-button>
          </footer>
        </div>
      </template>
    </s-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeTooltip1 = ref(false)
</script>

<style lang="scss" scoped>
@function -color($color, $alpha: 1) {
  @return unquote('rgba(var(--vsd-#{$color}), #{$alpha})');
}
.content-tooltip {
  .body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    .s-avatar-content {
      margin-top: -30px;
      border: 3px solid -color('theme-layout');
      box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1);
    }
    .text {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 0.55rem;
      padding: 10px;
      font-weight: normal;
      span {
        font-weight: bold;
        font-size: 0.7rem;
      }
    }
  }
  footer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  h4 {
    padding: 8px;
    margin: 0px;
    text-align: left;
  }
  p {
    text-align: left;
    padding: 0px;
    margin: 0px;
    line-height: 1rem;
    padding-bottom: 5px;
    padding-left: 8px;
  }
}
</style>

API