` by using the `customClass` option property: ```html Button ``` ## Directive syntax and usage ```html Button ``` Where `[container]` can be (optional): - An element ID (minus the #) to place the tooltip markup in - If not provided, tooltips are appended to the `body`. If the trigger element is inside a modal, the tooltip will be appended to the modal's container Where `[modX]` can be (all optional): - Positioning: `top`, `bottom`, `left`, `right`, `auto`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, or `rightbottom` (last one found wins, defaults to `top`). - Event trigger: `click`, `hover`, `focus`, `blur` (if none specified, defaults to `focus` and `hover`. `blur` is a close handler only, and if specified by itself, will be converted to `focus`). Use `manual` if you only want to control the visibility manually. - `nofade` to turn off animation. - `html` to enable rendering raw HTML. By default HTML is escaped and converted to text. - A delay value in the format of `d###` (where `###` is in ms, defaults to `50`), applied to both `hide` and `show`. - A show delay value in the format of `ds###` (where `###` is in ms, defaults to `50`), applied to `show` trigger only. - A hide delay value in the format of `dh###` (where `###` is in ms, defaults to `50`), applied to `hide` trigger only. - An offset value in pixels in the format of `o###` (where `###` is the number of pixels, defaults to `0`. Negative values allowed). - A boundary setting of `window` or `viewport`. The element to constrain the visual placement of the tooltip. If not specified, the boundary defaults to the trigger element's scroll parent (in most cases this will suffice). - A contextual variant in the form of `v-XXX` (where `XXX` is the color variant name). - `noninteractive` to make the tooltip not user-interactive. Where `` can be (optional): - A string containing the title of the tooltip - A function reference to generate the title of the tooltip (receives one arg which is a reference to the DOM element triggering the tooltip) - An object containing more complex configuration of tooltip. See below for accepted object properties: **Options configuration object properties:** | Property | Type | Default | Description | | ------------------- | ----------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `animation` | Boolean | `true` | Apply a CSS fade transition to the tooltip | | `container` | String ID or HTMLElement or `false` | `false` | Appends the tooltip to a specific element. Example: `container: '#body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. When set to `false` the tooltip will be appended to `body`, or if the trigger element is inside a modal it will append to the modal's container | | `delay` | Number or Object | `50` | Delay showing and hiding the tooltip (ms). If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }` | | `html` | Boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's title will be rendered in the tooltip. If false, the title will be inserted as plain text. Use text if you're worried about XSS attacks | | `placement` | String or Function | `'top'` | How to position the tooltip - `auto`, `top`, `bottom`, `left`, `right`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, or `rightbottom`. When `auto` is specified, it will dynamically reorient the tooltip | | `title` | String or Element or Function | `''` | Default title value if title attribute isn't present. If a function is given, it must return a string | | `trigger` | String | `'hover focus'` | How tooltip is triggered: `click`, `hover`, `focus`. You may pass multiple triggers; separate them with a space | | `offset` | Number or String | `0` | Offset of the tooltip relative to its target. For more information refer to Popper.js's offset docs | | `fallbackPlacement` | String or Array | `'flip'` | Allow to specify which position Popper will use on fallback. Can be `flip`, `clockwise`, `counterclockwise` or an array of placements. For more information refer to Popper.js's behavior docs | | `boundary` | String ID or HTMLElement | `'scrollParent'` | The container that the tooltip will be constrained visually. The default should suffice in most cases, but you may need to change this if your target element is in a small container with overflow scroll. Supported values: `'scrollParent'` (default), `'viewport'`, `'window'`, or a reference to an HTML element | | `boundaryPadding` | Number | `5` | Amount of pixel used to define a minimum distance between the boundaries and the tooltip. This makes sure the tooltip always has a little padding between the edges of its container | | `interactive` | Boolean | `true` | Whether the tooltip should be user-interactive | | `variant` | String | `null` | Contextual color variant for the tooltip | | `customClass` | String | `null` | A custom classname to apply to the tooltip outer wrapper element | | `id` | String | `null` | An ID to use on the tooltip root element. If none is provided, one will automatically be generated. If you do provide an ID, it _must_ be guaranteed to be unique on the rendered page | | `disabled` | Boolean | `false` | Set to `true` to disable the tooltip | ### Usage **Simplest usage:** ``` v-b-tooltip="'This is a Tooltip!'" ``` or use the element's `title` attribute for the tooltip content: ``` v-b-tooltip title="This is a title Tooltip" ``` **Placement examples:** ``` v-b-tooltip.bottom v-b-tooltip.right ``` **Variant examples:** ``` v-b-tooltip.v-primary => `primary` variant v-b-tooltip.v-danger => `danger` variant ``` **Trigger examples:** ``` v-b-tooltip.hover => Hover only v-b-tooltip.click => Click only v-b-tooltip.hover.focus => Both hover and focus ``` **Combo:** ``` v-b-tooltip.hover.bottom => Show on hover and place at bottom v-b-tooltip.bottom.hover => Same as above v-b-tooltip.bottom.hover.v-danger => Same as above, but with variant ``` **Object:** ``` v-b-tooltip="{ title: 'Title', placement: 'bottom', variant: 'danger' }" ``` ## Hiding and showing tooltips via \$root events You can close (hide) **all open tooltips** by emitting the `bv::hide::tooltip` event on \$root: ```js this.$root.$emit('bv::hide::tooltip') ``` To close a **specific tooltip**, pass the trigger element's `id`, or the `id` of the tooltip (if one was provided in the config object) as the first argument: ```js this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id') ``` To open a **specific tooltip**, pass the trigger element's `id`, or the `id` of the tooltip (if one was provided in the config object) as the first argument when emitting the `bv::show::tooltip` \$root event: ```js this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id') ``` To open all popovers simultaneously, omit the `id` argument when emitting the `bv::show::tooltip` event. These events work for both the component **and** directive versions of tooltip. Note the **trigger element** must exist in the DOM and be in a visible state in order for the tooltip to show. ## Disabling and enabling tooltips via \$root events You can disable **all open tooltips** by emitting the `bv::disable::tooltip` event on \$root: ```js this.$root.$emit('bv::disable::tooltip') ``` To disable a **specific tooltip**, pass the trigger element's `id`, or the `id` of the tooltip (if one was provided in the config object) as the first argument: ```js this.$root.$emit('bv::disable::tooltip', 'my-trigger-button-id') ``` To enable a **specific tooltip**, pass the trigger element's `id`, or the `id` of the tooltip (if one was provided in the config object) as the first argument when emitting the `bv::enable::tooltip` \$root event: ```js this.$root.$emit('bv::enable::tooltip', 'my-trigger-button-id') ``` To enable all popovers simultaneously, omit the `id` argument when emitting the `bv::enable::tooltip` event. These events work for both the component **and** directive versions of tooltip. Note the **trigger element** must exist in the DOM in order for the tooltip to be enabled or disabled. ## See also - [`v-b-popover` directive](/docs/directives/popover) - [`` component](/docs/components/tooltip) - [`` component](/docs/components/popover)