Tooltips & Popovers
For further plugin documentation please visit vue-tippy docs with our custom styles to add tooltips and popovers to any element on your website.
Tooltips
<template>
<div class="card-body tooltips">
<a
href="#"
class="me-5"
v-tippy="{
content: `<h5 class='mb-0 py-2 px-2 bg-primary fs-15 weight-400 text-white rounded'>Tooltip on top</h5>`,
allowHTML: true,
placement: 'top',
}"
>Tooltip on top</a
>
<a
href="#"
class="me-5"
v-tippy="{
content: `<h5 class='mb-0 py-2 px-2 bg-primary fs-15 weight-400 text-white rounded'>Tooltip on right</h5>`,
allowHTML: true,
placement: 'right',
}"
>Tooltip on right</a
>
<a
href="#"
class="me-5"
v-tippy="{
content: `<h5 class='mb-0 py-2 px-2 bg-primary fs-15 weight-400 text-white rounded'>Tooltip on bottom</h5>`,
allowHTML: true,
placement: 'bottom',
}"
>Tooltip on bottom</a
>
<a
href="#"
v-tippy="{
content: `<h5 class='mb-0 py-2 px-2 bg-primary fs-15 weight-400 text-white rounded'>Tooltip on left</h5>`,
allowHTML: true,
placement: 'left',
}"
>Tooltip on left</a
>
<div class="mt-5"></div>
<button
type="button"
class="btn btn-soft-primary rounded-pill me-2"
v-tippy="{
content: `<h5 class='mb-0 py-2 px-2 bg-primary fs-15 weight-400 text-white rounded'>Tooltip on top</h5>`,
allowHTML: true,
placement: 'top',
}"
>
Tooltip on top
</button>
<button
type="button"
class="btn btn-soft-primary rounded-pill me-2"
v-tippy="{
content: `<h5 class='mb-0 py-2 px-2 bg-primary fs-15 weight-400 text-white rounded'>Tooltip on right</h5>`,
allowHTML: true,
placement: 'right',
}"
>
Tooltip on right
</button>
<button
type="button"
class="btn btn-soft-primary rounded-pill me-2"
v-tippy="{
content: `<h5 class='mb-0 py-2 px-2 bg-primary fs-15 weight-400 text-white rounded'>Tooltip on bottom</h5>`,
allowHTML: true,
placement: 'bottom',
}"
>
Tooltip on bottom
</button>
<button
type="button"
class="btn btn-soft-primary rounded-pill me-2"
v-tippy="{
content: `<h5 class='mb-0 py-2 px-2 bg-primary fs-15 weight-400 text-white rounded'>Tooltip on left</h5>`,
allowHTML: true,
placement: 'left',
}"
>
Tooltip on left
</button>
</div>
</template>
<script setup>
import { directive as VTippy } from "vue-tippy";
</script>
<style lang="scss"></style>
Popovers
<template>
<a
class="btn btn-primary rounded-pill me-2"
v-tippy="{
content: ` <div class='popover' role='tooltip'>
<div class='popover-arrow'></div>
<h3 class='popover-header'>Sample Title</h3>
<div class='popover-body'>
Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis
natoque.
</div>
</div>`,
allowHTML: true,
trigger: 'click',
placement: 'top',
}"
>
Popover on top
</a>
<a
class="btn btn-primary rounded-pill me-2"
v-tippy="{
content: ` <div class='popover' role='tooltip'>
<div class='popover-arrow'></div>
<h3 class='popover-header'>Sample Title</h3>
<div class='popover-body'>
Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis
natoque.
</div>
</div>`,
allowHTML: true,
trigger: 'click',
placement: 'right',
}"
>
Popover on right
</a>
<a
class="btn btn-primary rounded-pill me-2"
v-tippy="{
content: ` <div class='popover' role='tooltip'>
<div class='popover-arrow'></div>
<h3 class='popover-header'>Sample Title</h3>
<div class='popover-body'>
Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis
natoque.
</div>
</div>`,
allowHTML: true,
trigger: 'click',
placement: 'bottom',
}"
>
Popover on bottom
</a>
<a
class="btn btn-primary rounded-pill me-2"
v-tippy="{
content: ` <div class='popover' role='tooltip'>
<div class='popover-arrow'></div>
<h3 class='popover-header'>Sample Title</h3>
<div class='popover-body'>
Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis
natoque.
</div>
</div>`,
allowHTML: true,
trigger: 'click',
placement: 'left',
}"
>
Popover on left
</a>
</template>
<script setup>
import { directive as VTippy } from "vue-tippy";
</script>
<style lang="scss" scoped></style>
Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox Nuxtjs