Tooltip #

<template>
  <section>
      <div class="odocs-spaced">
        <o-tooltip label="Tooltip right" position="right">
            <o-button> Right </o-button>
        </o-tooltip>

        <o-tooltip label="Tooltip top">
            <o-button> Top (default) </o-button>
        </o-tooltip>

        <o-tooltip label="Tooltip bottom" position="bottom">
            <o-button> Bottom </o-button>
        </o-tooltip>

        <o-tooltip label="Tooltip left" position="left">
            <o-button> Left </o-button>
        </o-tooltip>

        <o-tooltip label="delayed by 1000ms" :delay="1000">
            <o-button variant="warning"> Delayed </o-button>
        </o-tooltip>
      </div>
  </section>
</template>

<template>
  <section>
      <div class="odocs-spaced">
        <o-tooltip
            label="Tooltip multiline, probably because it's too long for a casual tooltip"
            multiline
            >
            <o-button> Multiline (default) </o-button>
        </o-tooltip>

        <o-tooltip
            label="It's not brief, but it's also not long"
            size="small"
            multiline
            >
            <o-button> Multiline (small) </o-button>
        </o-tooltip>

        <o-tooltip
            label="Tooltip large multiline, because it's too long to be on a medium size. Did I tell you it's really long? Yes, it is — I assure you!"
            position="bottom"
            size="large"
            multiline
            >
            <o-button> Multiline (large) </o-button>
        </o-tooltip>
    </div>
  </section>
</template>

<template>
  <section>
    <div class="odocs-spaced">
        <o-tooltip position="bottom" multiline>
            <o-button>Html Content</o-button>
            <template #content>
                <b>Lorem ipsum dolor sit amet</b>, consectetur warning elit.
                <i>Fusce id fermentum quam</i>.
            </template>
        </o-tooltip>

        <o-tooltip
            variant="primary"
            :triggers="['click']"
            :auto-close="['outside', 'escape']"
            >
            <template #content>
                <o-icon icon="heart" variant="danger"></o-icon>
                <o-icon icon="thumbs-up" variant="info"></o-icon>
                <o-icon icon="thumbs-down" variant="warning"></o-icon>
                <o-icon icon="smile-beam"></o-icon>
            </template>
            <o-button>Action</o-button>
        </o-tooltip>
    </div>
  </section>
</template>

<template>
  <section>
    <o-button @click="active = !active"> Toggle </o-button>

    <hr />

    <div class="odocs-spaced">
        <o-tooltip label="I'm never closing" :active="active" always>
            <o-button> Always </o-button>
        </o-tooltip>

        <o-tooltip label="Tooltip right" position="right" :active="active">
            <o-button> Right </o-button>
        </o-tooltip>
    </div>
  </section>
</template>

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

export default defineComponent({
    setup() {
        const active = ref(true)
        return { active }
    }
})
</script>