BootstrapVue — Tooltips and Popover Directives

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we look at how to use the v-b-tooltip and v-b-popover directives.

v-b-tooltip Directive

We can use the html modifier to make the v-b-tooltip directive render HTML.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-tooltip.html title="Hello <b>World!</b>">html tooltip</b-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the b-button component with the v-b-tooltip directive.

It has the html modifier added to it so that we can render HTML that’s set as the value of title .

Hiding and Showing Tooltip with $root Events

We can hide and show all tooltips by emitting events on this.$root .

For example, we can write:

this.$root.$emit('bv::hide::tooltip')

to hide a tooltip.

Also, we can write:

this.$root.$emit('bv::hide::tooltip', 'trigger-button-id')

to hide a tooltip by its ID.

To show a tooltip, we can write:

this.$root.$emit('bv::show::tooltip', 'trigger-button-id')

to show a tooltip by ID.

Disabling and Enabling Tooltip with $root Events

Likewise, we can disable or enable tooltips with $root events.

For example, we can write:

this.$root.$emit('bv::disable::tooltip')

to disable all tooltips.

Also, we can write:

this.$root.$emit('bv::disable::tooltip', 'trigger-button-id')

to disable a tooltip with a particular ID.

To enable it, we can write:

this.$root.$emit('bv::enable::tooltip', 'trigger-button-id')

Listening to Tooltip Changes with $root Events

We can listen to tooltip events if we add a listener in the mounted hook.

For example, we can write:

export default {
  mounted() {
    this.$root.$on('bv::tooltip::show', bvEvent => {
      console.log('bvEvent:', bvEvent)
    })
  }
}

Hover

We can use the v-b-hover directive to run a callback on hover.

For example, we can write:

<div v-b-hover="callback">content</div>

Then the callback is run when we hover over the div.

We can write a callback as follows:

<template>
  <div id="app">
    <div v-b-hover="callback">content</div>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    callback(hovered){
      console.log(hovered)
    }
  }
};
</script>

The callback takes a hovered parameter, which is true when we hover over the div and false otherwise.

Popovers

We can add a popover to our app with the v-b-popover directive.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-popover.hover="'popover content'" title="Popover">Hover Me</b-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We set the title prop to set the title.

The content is the value of the v-b-popover directive.

The hover modifier makes it show when we hover over the button.

Popover Positioning

We can change the positioning of the popover.

The possible values for positioning are top, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop, and leftbottom .

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-popover.hover.bottomright="'popover content'" title="Popover">Hover Me</b-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Then the popover will be shown on the bottom right because of the bottomright modifier.

Triggers

We can trigger the showing of the popover on events other than hover.

We can show it on click, hover, or focus,

To change the event that triggers the display of the popover, we can change the modifier of v-b-popover .

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-popover.click="'popover content'" title="Popover">Click Me</b-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Now the popover is displayed when we click the button because of the click modifier.

Dismiss Popover on Next Click

We can add the blur and click modifiers to dismiss the popover on the next click.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-popover.click.blur="'popover content'" title="Popover">Click Me</b-button>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Now when we click the Click Me button, the popover will toggle on and off.

Heading and Content

We can change the heading and content with an object we set as the value of v-b-popover .

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-popover="options">Hover Me</b-button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      options: {
        title: "This is the <b>title</b>",
        content: "This is the <i>content<i>",
        html: true
      }
    };
  }
};
</script>

The title and content are set in the options object instead of in the props.

html lets us display HTML content.

Conclusion

We can trigger root events to enable/disable or toggle on and off tooltips.

Also, we can add popovers to display messages.