@@ -170,20 +170,42 @@ override the `pointer-events` on the disabled element.
170 170 171 171
| Prop | Default | Description | Supported values |
172 172
| -------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
173 -
| `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 |
173 +
| `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 |
174 174
| `title` | `null` | Tooltip content (text only, no HTML). if HTML is required, place it in the default slot | Plain text |
175 -
| `placement` | `'top'` | Tooltip position, relative to the trigger element. | `top`, `bottom`, `left`, `right`, `auto`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, `rightbottom` |
176 -
| `fallback-placement` | `'flip'` | Auto-flip placement behaviour of the tooltip, relative to the trigger element. | `flip`, `clockwise`, `counterclockwise`, or an array of valid placements evaluated from left to right |
175 +
| `placement` | `'top'` | Tooltip position, relative to the trigger element | `top`, `bottom`, `left`, `right`, `auto`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, `rightbottom` |
176 +
| `fallback-placement` | `'flip'` | Auto-flip placement behaviour of the tooltip, relative to the trigger element | `flip`, `clockwise`, `counterclockwise`, or an array of valid placements evaluated from left to right |
177 177
| `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`. |
178 178
| `no-fade` | `false` | Disable fade animation when set to `true` | `true` or `false` |
179 179
| `delay` | `50` | 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. |
180 180
| `offset` | `0` | Shift the center of the tooltip by specified number of pixels | Any negative or positive integer |
181 181
| `container` | `null` | Element string ID to append rendered tooltip into. If `null` or element not found, tooltip is appended to `<body>` (default) | Any valid in-document unique element ID. |
182 182
| `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. |
183 -
| `boundary-padding` | `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 |
183 +
| `boundary-padding` | `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 |
184 +
| `noninteractive` | `false` | Wether the tooltip should not be user-interactive | `true` or `false` |
184 185
| `variant` | `null` | Contextual color variant for the tooltip | Any contextual theme color variant name |
185 186
| `custom-class` | `null` | A custom classname to apply to the tooltip outer wrapper element | A string |
186 -
| `id` | `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. | A valid unique element ID string |
187 +
| `id` | `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 | A valid unique element ID string |
188 + 189 +
### Noninteractive tooltips
190 + 191 +
BootstrapVue's tooltips are user-interactive by default for accessability reasons. To restore
192 +
Bootstraps default behavior apply the `noninteractive` prop:
193 + 194 +
```html
195 +
<div class="text-center">
196 +
<div>
197 +
<b-button id="tooltip-button-interactive">My tooltip is interactive</b-button>
198 +
<b-tooltip target="tooltip-button-interactive">I will stay open when hovered</b-tooltip>
199 +
</div>
200 + 201 +
<div class="mt-3">
202 +
<b-button id="tooltip-button-not-interactive">Mine is not...</b-button>
203 +
<b-tooltip target="tooltip-button-not-interactive" noninteractive>Catch me if you can!</b-tooltip>
204 +
</div>
205 +
</div>
206 + 207 +
<!-- b-tooltip-interactive.vue -->
208 +
```
187 209 188 210
### Variants and custom class
189 211 RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4