@gitlab/ui/src/components/base/tooltip/tooltip.md

GitLab UI Components

## Usage

Using the tooltip component is recommended if you have HTML content.
It is also currently required if the tooltip content needs to change while it's visible (see [this upstream issue]).
In all other cases, please use the directive.

[this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142

**Using the component**
~~~js
<gl-button ref="someButton">
  ...
</gl-button>

<gl-tooltip :target="() => $refs.someButton">
  some <em>tooltip<em/> text
</gl-tooltip>
~~~

**Using the directive**

You will need to import and register `GlTooltipDirective` before you can use it.

~~~js
<script>
import { GlTooltipDirective } from '@gitlab/ui';

export default {
  directives: {
    GlTooltip: GlTooltipDirective,
  },
};
</script>

<element
  v-gl-tooltip.${modifier}
  title="some tooltip text"
>
  ...
</element>
~~~

## Directive attributes

`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`].

## Under the hood
Tooltip uses [`<b-tooltip>`] and [`v-b-tooltip`] internally.

[`<b-tooltip>`]: https://bootstrap-vue.js.org/docs/components/tooltip

[`v-b-tooltip`]: https://bootstrap-vue.js.org/docs/directives/tooltip