<script>
console.clear();

const { Tooltip } = bootstrap;
  
function tooltipInit(el, { value, arg }) {
  const tooltip = new Tooltip(el, {
    title: value,
    trigger: 'hover',
    placement: arg,
  });
  return tooltip;
}
  
const tooltip = {
  mounted(el, { value, arg = 'auto' }) {
    const tooltip = tooltipInit(el, { value, arg });
    el.$tooltip = tooltip;
  },
  updated(el, { value, arg = 'auto' }) {
    el.$tooltip.disable();
    const tooltip = tooltipInit(el, { value, arg });
    el.$tooltip = tooltip;
  },
  unmounted(el) {
    el.$tooltip.disable();
  },
};
  
export default {
  directives: { tooltip },
};
  
</script>

<template>
  <p v-tooltip="'預設'">default</p>
  <p v-tooltip:top="'上上上'">top</p>
  <p v-tooltip:right="'右右右'">right</p>
  <p v-tooltip:bottom="'下下下'">bottom</p>
  <p v-tooltip:left="'左左左'">left</p>
</template>

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
  }
</style>