UI Development with Chakra UI Vue — Tooltips

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Tooltip

We can add a tooltip with Chakra UI Vue.

For instance, we can write:

<template>
  <c-box> <c-tooltip label="tooltip">Hover Me</c-tooltip> </c-box>
</template>

<script>
import { CBox, CTooltip } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTooltip,
  },
};
</script>

We add the c-tooltip component to add the tooltip.

The label has the tooltip text.

When we hover over ‘Hover Me’, we see the tooltip displayed.

We can add an icon as the hover content.

For instance, we can write:

<template>
  <c-box>
    <c-tooltip label="Welcome home" placement="bottom">
      <c-icon name="phone" />
    </c-tooltip>
  </c-box>
</template>

<script>
import { CBox, CTooltip, CIcon } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTooltip,
    CIcon,
  },
};
</script>

to add an icon.

placement sets the placement of the tooltip.

We can change the background color of the tooltip with the bg prop:

<template>
  <c-box>
    <c-tooltip label="Welcome home" placement="bottom" bg="blue.600">
      <c-icon name="phone" />
    </c-tooltip>
  </c-box>
</template>

<script>
import { CBox, CTooltip, CIcon } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTooltip,
    CIcon,
  },
};
</script>

And we can add an arrow to the tooltip with the has-arrow prop:

<template>
  <c-box>
    <c-tooltip label="Welcome home" placement="bottom" has-arrow>
      <c-icon name="phone" />
    </c-tooltip>
  </c-box>
</template>

<script>
import { CBox, CTooltip, CIcon } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTooltip,
    CIcon,
  },
};
</script>

Conclusion

We can add tooltips easily with Chakra UI Vue.