` intermediate container element at the point in the DOM where the `` component is placed. This may affect layout and/or styling of components such as ``, ``, and ``. To avoid these possible layout issues, place the `` component **outside** of these types of components. The target element **must** exist in the document before `` is mounted. If the target element is not found during mount, the tooltip will never open. Always place your `` component lower in the DOM than your target element. This rule also applies if a callback is used as target element, since that callback is called only once on mount. **Note:** _When using the default slot for the title, `` transfers the rendered DOM from that slot into the tooltip's markup when shown, and returns the content back to the `` component when hidden. This may cause some issues in rare circumstances, so please test your implementation accordingly! The `title` prop does not have this behavior. For simple tooltips, we recommend using the `v-b-tooltip` directive and enable the `html` modifier if needed._ ## Positioning Twelve options are available for positioning: `top`, `topleft`, `topright`, `right`, `righttop`, `rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom` aligned. The default position is `top`. Positioning is relative to the trigger element. ## Triggers Tooltips can be triggered (opened/closed) via any combination of `click`, `hover` and `focus`. The default trigger is `hover focus`. If a tooltip has more than one trigger, then all triggers must be cleared before the tooltip will close. I.e. if a tooltip has the trigger `focus click`, and it was opened by `focus`, and the user then clicks the trigger element, they must click it again **and** move focus to close the tooltip. ## `` component usage ```html

Live chat

Html chat

Alternative chat

Hello World!

``` ### Component options | Prop | Default | Description | Supported values | | ----------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `target` | `null` | Element String ID, or a reference to an element or component, or a function returning either of them, that you want to trigger the tooltip. **Required** | Any valid, in-document unique element ID, element reference or component reference or a function returning any such ID / reference | | `title` | `null` | Tooltip content (text only, no HTML). if HTML is required, place it in the default slot | Plain text | | `placement` | `top` | Tooltip position, relative to the trigger element. | `top`, `bottom`, `left`, `right`, `auto`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, `rightbottom` | | `triggers` | `hover focus` | Space separated list of event(s), which will trigger open/close of tooltip | `hover`, `focus`, `click`. Note `blur` is a special use case to close tooltip on next click, usually used in conjunction with `click`. | | `no-fade` | `false` | Disable fade animation when set to `true` | `true` or `false` | | `delay` | `0` | Delay showing and hiding of tooltip by specified number of milliseconds. Can also be specified as an object in the form of `{ show: 100, hide: 400 }` allowing different show and hide delays | `0` and up, integers only. | | `offset` | `0` | Shift the center of the tooltip by specified number of pixels | Any negative or positive integer | | `container` | `null` | Element string ID to append rendered tooltip into. If `null` or element not found, tooltip is appended to `` (default) | Any valid in-document unique element ID. | | `boundary` | `'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 | `'scrollParent'` (default), `'viewport'`, `'window'`, or a reference to an HTML element. | | `boundaryPadding` | `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. | Any positive number | ### Programmatically show and hide tooltip You can manually control the visibility of a tooltip via the syncable Boolean `show` prop. Setting it to `true` will show the tooltip, while setting it to `false` will hide the tooltip. ```html ``` To make the tooltip shown on initial render, simply add the `show` prop on ``: ```html

I start open

``` Programmatic control can also be affected by submitting `'open'` and `'close'` events to the tooltip by reference. ```html ``` You can also use `$root` events to trigger the showing and hiding of tooltip(s). See the **Hiding and showing tooltips via \$root events** section below for details. ### Programmatically disabling tooltip You can disable tooltip via the syncable Boolean prop `disabled` (default is `false`) Setting it to `true` will disable the tooltip. If the tooltip is currently visible when disabled is set to `false`, the tooltip will remain visible until it is enabled or programmatically closed. If the tooltip is disabled/enabled via \$root events (see below), your `disabled` value will be updated as long as you have provided the `.sync` prop modifier. ```html ``` **Note:** _In the above example, since we are using the default tooltip triggers of `focus hover`, the tooltip will close before it is disabled due to loosing focus (and hover) to the toggle button._ You can also emit `$root` events to trigger disabling and enabling of tooltip(s). See the **Disabling and enabling tooltips via \$root events** section below for details. You can also emit `$root` events to trigger disabling and enabling of popover(s). See the **Disabling and enabling tooltips via \$root events** section below for details. ## `v-b-tooltip` directive usage The `v-b-tooltip` directive makes adding tooltips even easier, without additional placeholder markup: ```html

Live chat

Html chat

``` Refer to the [`v-b-tooltip` documentation](/docs/directives/tooltip) for more information and features of the directive format. ## 'Global' \$root instance events Using `$root` instance it is possible to emit and listen events somewhere out of a component, where `` is used. In short, `$root` behaves like a global event emitters and listener. Details about `$root` instance can be found in [the official Vue docs](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Root-Instance). ### 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` as the argument: ```js this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id') ``` To open a **specific tooltip**, pass the trigger element's `id` as the argument when emitting the `bv::show::tooltip` \$root event: ```js this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id') ``` To open all tooltips 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` as the argument: ```js this.$root.$emit('bv::disable::tooltip', 'my-trigger-button-id') ``` To enable a **specific tooltip**, pass the trigger element's `id` as the argument when emitting the `bv::enable::tooltip` \$root event: ```js this.$root.$emit('bv::enable::tooltip', 'my-trigger-button-id') ``` To enable all tooltips 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._ ### Listening to tooltip changes via \$root events To listen to any tooltip opening, use: ```js export default { mounted() { this.$root.$on('bv::tooltip::show', bvEvent => { console.log('bvEvent:', bvEvent) }) } } ``` Refer to the [Events](/docs/components/tooltip#component-reference) section of documentation for the full list of events.