@gitlab/ui 114.0.1 → 114.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/package.json +9 -28
  2. package/CHANGELOG.md +0 -13132
  3. package/src/vendor/bootstrap/LICENSE +0 -11
  4. package/src/vendor/bootstrap-vue/LICENSE +0 -11
  5. package/src/vendor/bootstrap-vue/package.json +0 -144
  6. package/src/vendor/bootstrap-vue/src/components/button/MODIFICATIONS.md +0 -16
  7. package/src/vendor/bootstrap-vue/src/components/button/README.md +0 -240
  8. package/src/vendor/bootstrap-vue/src/components/button/button-close.spec.js +0 -210
  9. package/src/vendor/bootstrap-vue/src/components/button/button.spec.js +0 -349
  10. package/src/vendor/bootstrap-vue/src/components/button/package.json +0 -105
  11. package/src/vendor/bootstrap-vue/src/components/dropdown/README.md +0 -730
  12. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-divider.spec.js +0 -58
  13. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-form.spec.js +0 -110
  14. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-group.spec.js +0 -94
  15. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-header.spec.js +0 -73
  16. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.spec.js +0 -117
  17. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item.spec.js +0 -147
  18. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-text.spec.js +0 -59
  19. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.spec.js +0 -1121
  20. package/src/vendor/bootstrap-vue/src/components/dropdown/package.json +0 -368
  21. package/src/vendor/bootstrap-vue/src/components/form/README.md +0 -365
  22. package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.spec.js +0 -170
  23. package/src/vendor/bootstrap-vue/src/components/form/form-text.spec.js +0 -93
  24. package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.spec.js +0 -157
  25. package/src/vendor/bootstrap-vue/src/components/form/form.spec.js +0 -97
  26. package/src/vendor/bootstrap-vue/src/components/form/package.json +0 -112
  27. package/src/vendor/bootstrap-vue/src/components/form-checkbox/README.md +0 -691
  28. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group.spec.js +0 -525
  29. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox.spec.js +0 -922
  30. package/src/vendor/bootstrap-vue/src/components/form-checkbox/package.json +0 -172
  31. package/src/vendor/bootstrap-vue/src/components/form-group/README.md +0 -339
  32. package/src/vendor/bootstrap-vue/src/components/form-group/form-group.spec.js +0 -477
  33. package/src/vendor/bootstrap-vue/src/components/form-group/package.json +0 -183
  34. package/src/vendor/bootstrap-vue/src/components/form-radio/README.md +0 -437
  35. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio-group.spec.js +0 -357
  36. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio.spec.js +0 -587
  37. package/src/vendor/bootstrap-vue/src/components/form-radio/package.json +0 -162
  38. package/src/vendor/bootstrap-vue/src/components/form-select/README.md +0 -504
  39. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option-group.spec.js +0 -138
  40. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option.spec.js +0 -75
  41. package/src/vendor/bootstrap-vue/src/components/form-select/form-select.spec.js +0 -723
  42. package/src/vendor/bootstrap-vue/src/components/form-select/package.json +0 -132
  43. package/src/vendor/bootstrap-vue/src/components/form-textarea/README.md +0 -453
  44. package/src/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.spec.js +0 -1000
  45. package/src/vendor/bootstrap-vue/src/components/form-textarea/package.json +0 -122
  46. package/src/vendor/bootstrap-vue/src/components/layout/README.md +0 -791
  47. package/src/vendor/bootstrap-vue/src/components/layout/col.spec.js +0 -192
  48. package/src/vendor/bootstrap-vue/src/components/layout/form-row.spec.js +0 -45
  49. package/src/vendor/bootstrap-vue/src/components/layout/package.json +0 -99
  50. package/src/vendor/bootstrap-vue/src/components/link/README.md +0 -76
  51. package/src/vendor/bootstrap-vue/src/components/link/link.spec.js +0 -434
  52. package/src/vendor/bootstrap-vue/src/components/link/package.json +0 -57
  53. package/src/vendor/bootstrap-vue/src/components/modal/MODIFICATIONS.md +0 -30
  54. package/src/vendor/bootstrap-vue/src/components/modal/README.md +0 -1067
  55. package/src/vendor/bootstrap-vue/src/components/modal/helpers/bv-modal-event.class.spec.js +0 -82
  56. package/src/vendor/bootstrap-vue/src/components/modal/modal.spec.js +0 -1418
  57. package/src/vendor/bootstrap-vue/src/components/modal/package.json +0 -544
  58. package/src/vendor/bootstrap-vue/src/components/nav/README.md +0 -362
  59. package/src/vendor/bootstrap-vue/src/components/nav/nav-item.spec.js +0 -127
  60. package/src/vendor/bootstrap-vue/src/components/nav/nav.spec.js +0 -177
  61. package/src/vendor/bootstrap-vue/src/components/nav/package.json +0 -73
  62. package/src/vendor/bootstrap-vue/src/components/popover/README.md +0 -919
  63. package/src/vendor/bootstrap-vue/src/components/popover/package.json +0 -261
  64. package/src/vendor/bootstrap-vue/src/components/popover/popover.spec.js +0 -198
  65. package/src/vendor/bootstrap-vue/src/components/table/README.md +0 -3157
  66. package/src/vendor/bootstrap-vue/src/components/table/helpers/default-sort-compare.spec.js +0 -112
  67. package/src/vendor/bootstrap-vue/src/components/table/helpers/normalize-fields.spec.js +0 -93
  68. package/src/vendor/bootstrap-vue/src/components/table/package.json +0 -1763
  69. package/src/vendor/bootstrap-vue/src/components/table/table-busy.spec.js +0 -150
  70. package/src/vendor/bootstrap-vue/src/components/table/table-caption.spec.js +0 -176
  71. package/src/vendor/bootstrap-vue/src/components/table/table-colgroup.spec.js +0 -81
  72. package/src/vendor/bootstrap-vue/src/components/table/table-filtering.spec.js +0 -409
  73. package/src/vendor/bootstrap-vue/src/components/table/table-item-formatter.spec.js +0 -56
  74. package/src/vendor/bootstrap-vue/src/components/table/table-lite.spec.js +0 -682
  75. package/src/vendor/bootstrap-vue/src/components/table/table-pagination.spec.js +0 -133
  76. package/src/vendor/bootstrap-vue/src/components/table/table-primarykey.spec.js +0 -83
  77. package/src/vendor/bootstrap-vue/src/components/table/table-provider.spec.js +0 -411
  78. package/src/vendor/bootstrap-vue/src/components/table/table-row-details.spec.js +0 -459
  79. package/src/vendor/bootstrap-vue/src/components/table/table-selectable.spec.js +0 -1182
  80. package/src/vendor/bootstrap-vue/src/components/table/table-simple.spec.js +0 -206
  81. package/src/vendor/bootstrap-vue/src/components/table/table-sorting.spec.js +0 -858
  82. package/src/vendor/bootstrap-vue/src/components/table/table-sticky-column.spec.js +0 -377
  83. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-bottom-row.spec.js +0 -94
  84. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-row-events.spec.js +0 -529
  85. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-top-row.spec.js +0 -88
  86. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-transition.spec.js +0 -83
  87. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-custom.spec.js +0 -91
  88. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-events.spec.js +0 -137
  89. package/src/vendor/bootstrap-vue/src/components/table/table-thead-events.spec.js +0 -155
  90. package/src/vendor/bootstrap-vue/src/components/table/table-thead-top.spec.js +0 -96
  91. package/src/vendor/bootstrap-vue/src/components/table/table.spec.js +0 -692
  92. package/src/vendor/bootstrap-vue/src/components/tabs/README.md +0 -433
  93. package/src/vendor/bootstrap-vue/src/components/tabs/package.json +0 -205
  94. package/src/vendor/bootstrap-vue/src/components/tabs/tab.spec.js +0 -330
  95. package/src/vendor/bootstrap-vue/src/components/tabs/tabs.spec.js +0 -778
  96. package/src/vendor/bootstrap-vue/src/components/toast/README.md +0 -655
  97. package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.spec.js +0 -117
  98. package/src/vendor/bootstrap-vue/src/components/toast/package.json +0 -184
  99. package/src/vendor/bootstrap-vue/src/components/toast/toast.spec.js +0 -294
  100. package/src/vendor/bootstrap-vue/src/components/toast/toaster.spec.js +0 -77
  101. package/src/vendor/bootstrap-vue/src/components/tooltip/README.md +0 -559
  102. package/src/vendor/bootstrap-vue/src/components/tooltip/package.json +0 -258
  103. package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.spec.js +0 -1240
  104. package/src/vendor/bootstrap-vue/src/components/transition/package.json +0 -5
  105. package/src/vendor/bootstrap-vue/src/components/transporter/package.json +0 -5
  106. package/src/vendor/bootstrap-vue/src/components/transporter/transporter.spec.js +0 -85
  107. package/src/vendor/bootstrap-vue/src/directives/modal/modal.spec.js +0 -191
  108. package/src/vendor/bootstrap-vue/src/directives/tooltip/README.md +0 -521
  109. package/src/vendor/bootstrap-vue/src/directives/tooltip/package.json +0 -131
  110. package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.spec.js +0 -190
  111. package/src/vendor/bootstrap-vue/src/directives/visible/README.md +0 -244
  112. package/src/vendor/bootstrap-vue/src/directives/visible/package.json +0 -24
  113. package/src/vendor/bootstrap-vue/src/mixins/attrs.spec.js +0 -194
  114. package/src/vendor/bootstrap-vue/src/mixins/click-out.spec.js +0 -52
  115. package/src/vendor/bootstrap-vue/src/mixins/focus-in.spec.js +0 -53
  116. package/src/vendor/bootstrap-vue/src/mixins/listen-on-document.spec.js +0 -117
  117. package/src/vendor/bootstrap-vue/src/mixins/listen-on-root.spec.js +0 -77
  118. package/src/vendor/bootstrap-vue/src/mixins/listen-on-window.spec.js +0 -115
  119. package/src/vendor/bootstrap-vue/src/mixins/listeners.spec.js +0 -245
  120. package/src/vendor/bootstrap-vue/src/utils/bv-event.class.spec.js +0 -66
  121. package/src/vendor/bootstrap-vue/src/utils/clone-deep.spec.js +0 -70
  122. package/src/vendor/bootstrap-vue/src/utils/config.spec.js +0 -169
  123. package/src/vendor/bootstrap-vue/src/utils/css-escape.spec.js +0 -82
  124. package/src/vendor/bootstrap-vue/src/utils/dom.spec.js +0 -291
  125. package/src/vendor/bootstrap-vue/src/utils/events.spec.js +0 -41
  126. package/src/vendor/bootstrap-vue/src/utils/get.spec.js +0 -109
  127. package/src/vendor/bootstrap-vue/src/utils/inspect.spec.js +0 -251
  128. package/src/vendor/bootstrap-vue/src/utils/loose-equal.spec.js +0 -203
  129. package/src/vendor/bootstrap-vue/src/utils/normalize-slot.spec.js +0 -63
  130. package/src/vendor/bootstrap-vue/src/utils/number.spec.js +0 -72
  131. package/src/vendor/bootstrap-vue/src/utils/object.spec.js +0 -61
  132. package/src/vendor/bootstrap-vue/src/utils/props.spec.js +0 -112
  133. package/src/vendor/bootstrap-vue/src/utils/router.spec.js +0 -248
  134. package/src/vendor/bootstrap-vue/src/utils/string.spec.js +0 -65
  135. package/src/vendor/bootstrap-vue/src/utils/stringify-object-values.spec.js +0 -47
  136. package/src/vendor/bootstrap-vue/src/utils/warn.spec.js +0 -54
@@ -1,521 +0,0 @@
1
- # Tooltip
2
-
3
- > Add custom BootstrapVue tooltips to any element. Tooltips can be triggered by hovering, focusing,
4
- > or clicking an element.
5
-
6
- ## Overview
7
-
8
- Use the `v-b-tooltip` directive on any element or component where you would like a tooltip to
9
- appear.
10
-
11
- ```html
12
- <div class="text-center my-3">
13
- <b-button v-b-tooltip.hover title="Tooltip content">Hover Me</b-button>
14
- </div>
15
-
16
- <!-- b-tooltip.vue -->
17
- ```
18
-
19
- Things to know when using the tooltip directive:
20
-
21
- - Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning.
22
- - Tooltips require BootstrapVue's custom SCSS/CSS in order to function correctly, and for variants.
23
- - If a title is not provided (or is an empty string), the tooltip will not show.
24
- - Specify container: 'body' (the default) to avoid rendering problems in more complex components
25
- (like input groups, button groups, etc.).
26
- - Triggering tooltips on hidden elements will not work.
27
- - Tooltips for `disabled` elements must be triggered on a wrapper element.
28
- - When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use
29
- white-space: nowrap; on your `<a>`s, `<b-link>`s and `<router-link>`s to avoid this behavior.
30
- - Tooltips must be hidden before their corresponding elements have been removed from the DOM.
31
-
32
- ## Positioning
33
-
34
- Twelve options are available for positioning: `top`, `topleft`, `topright`, `right`, `righttop`,
35
- `rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom` aligned.
36
- The default position is `top`. Positioning is relative to the trigger element.
37
-
38
- <div class="bd-example bd-example-tooltip-static">
39
- <div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
40
- <div class="arrow" style="left: calc(50% - 6px)"></div>
41
- <div class="tooltip-inner">Tooltip on the top</div>
42
- </div>
43
- <div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
44
- <div class="arrow" style="right: 0px"></div>
45
- <div class="tooltip-inner">Tooltip on the topleft</div>
46
- </div>
47
- <div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
48
- <div class="arrow" style="left: 0px"></div>
49
- <div class="tooltip-inner">Tooltip on the topright</div>
50
- </div>
51
- <div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
52
- <div class="arrow" style="top: 5px"></div>
53
- <div class="tooltip-inner">Tooltip on the right</div>
54
- </div>
55
- <div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
56
- <div class="arrow" style="bottom: 0px"></div>
57
- <div class="tooltip-inner">Tooltip on the righttop</div>
58
- </div>
59
- <div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
60
- <div class="arrow" style="top: 0px"></div>
61
- <div class="tooltip-inner">Tooltip on the rightbottom</div>
62
- </div>
63
- <div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
64
- <div class="arrow" style="left: calc(50% - 6px)"></div>
65
- <div class="tooltip-inner">Tooltip on the bottom</div>
66
- </div>
67
- <div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
68
- <div class="arrow" style="right: 0px"></div>
69
- <div class="tooltip-inner">Tooltip on the bottomleft</div>
70
- </div>
71
- <div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
72
- <div class="arrow" style="left: 0px"></div>
73
- <div class="tooltip-inner">Tooltip on the bottomright</div>
74
- </div>
75
- <div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
76
- <div class="arrow" style="top: 5px"></div>
77
- <div class="tooltip-inner">Tooltip on the left</div>
78
- </div>
79
- <div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
80
- <div class="arrow" style="bottom: 0px"></div>
81
- <div class="tooltip-inner">Tooltip on the lefttop</div>
82
- </div>
83
- <div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
84
- <div class="arrow" style="top: 0px"></div>
85
- <div class="tooltip-inner">Tooltip on the leftbottom</div>
86
- </div>
87
- </div>
88
-
89
- **Live example**
90
-
91
- ```html
92
- <div>
93
- <b-container fluid>
94
- <b-row class="text-center">
95
- <b-col md="3" class="py-3">
96
- <b-button v-b-tooltip.hover.top="'Tooltip!'" variant="primary">Top</b-button>
97
- </b-col>
98
- <b-col md="3" class="py-3">
99
- <b-button v-b-tooltip.hover.right="'Tooltip!'" variant="primary">Right</b-button>
100
- </b-col>
101
- <b-col md="3" class="py-3">
102
- <b-button v-b-tooltip.hover.left="'Tooltip!'" variant="primary">Left</b-button>
103
- </b-col>
104
- <b-col md="3" class="py-3">
105
- <b-button v-b-tooltip.hover.bottom="'Tooltip!'" variant="primary">Bottom</b-button>
106
- </b-col>
107
- <b-col md="3" class="py-3">
108
- <b-button v-b-tooltip.hover.topright="'Tooltip!'" variant="primary">Top right</b-button>
109
- </b-col>
110
- <b-col md="3" class="py-3">
111
- <b-button v-b-tooltip.hover.topleft="'Tooltip!'" variant="primary">Top left</b-button>
112
- </b-col>
113
- <b-col md="3" class="py-3">
114
- <b-button v-b-tooltip.hover.bottomright="'Tooltip!'" variant="primary">Bottom right</b-button>
115
- </b-col>
116
- <b-col md="3" class="py-3">
117
- <b-button v-b-tooltip.hover.bottomleft="'Tooltip!'" variant="primary">Bottom left</b-button>
118
- </b-col>
119
- <b-col md="3" class="py-3">
120
- <b-button v-b-tooltip.hover.lefttop="'Tooltip!'" variant="primary">Left top</b-button>
121
- </b-col>
122
- <b-col md="3" class="py-3">
123
- <b-button v-b-tooltip.hover.leftbottom="'Tooltip!'" variant="primary">Left bottom</b-button>
124
- </b-col>
125
- <b-col md="3" class="py-3">
126
- <b-button v-b-tooltip.hover.righttop="'Tooltip!'" variant="primary">Right top</b-button>
127
- </b-col>
128
- <b-col md="3" class="py-3">
129
- <b-button v-b-tooltip.hover.rightbottom="'Tooltip!'" variant="primary">Right bottom</b-button>
130
- </b-col>
131
- </b-row>
132
- </b-container>
133
- </div>
134
-
135
- <!-- b-tooltip-positioning.vue -->
136
- ```
137
-
138
- ## Triggers
139
-
140
- Tooltips can be triggered (opened/closed) via any combination of `click`, `hover` and `focus`. The
141
- default trigger is `hover focus`. Or a trigger of manual can be specified, where the popover can
142
- only be opened or closed [programmatically](#hiding-and-showing-tooltips-via-root-events).
143
-
144
- If a tooltip has more than one trigger, then all triggers must be cleared before the tooltip will
145
- close. I.e. if a tooltip has the trigger `focus click`, and it was opened by `focus`, and the user
146
- then clicks the trigger element, they must click it again **and** move focus to close the tooltip.
147
-
148
- ```html
149
- <div>
150
- <b-container>
151
- <b-row class="text-center">
152
- <b-col md="3" class="py-3">
153
- <b-button v-b-tooltip="'Tooltip!'" variant="outline-success">Hover + Focus</b-button>
154
- </b-col>
155
- <b-col md="3" class="py-3">
156
- <b-button v-b-tooltip.hover="'Tooltip!'" variant="outline-success">Hover</b-button>
157
- </b-col>
158
- <b-col md="3" class="py-3">
159
- <b-button v-b-tooltip.click="'Tooltip!'" variant="outline-success">Click</b-button>
160
- </b-col>
161
- <b-col md="3" class="py-3">
162
- <b-button v-b-tooltip.focus="'Tooltip!'" variant="outline-success">Focus</b-button>
163
- </b-col>
164
- </b-row>
165
- </b-container>
166
- </div>
167
-
168
- <!-- b-tooltip-triggers.vue -->
169
- ```
170
-
171
- ### Making tooltips work for keyboard and assistive technology users
172
-
173
- You should only add tooltips to HTML elements that are traditionally keyboard-focusable and
174
- interactive (such as links, buttons, or form controls). Although arbitrary HTML elements (such as
175
- `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially
176
- annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most
177
- assistive technologies currently do not announce the tooltip in this situation.
178
-
179
- Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your
180
- tooltips _impossible to trigger for keyboard-only users_.
181
-
182
- ### Disabled elements
183
-
184
- Elements with the `disabled` attribute aren’t interactive, meaning users cannot focus, hover, or
185
- click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip
186
- from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`, and
187
- override the `pointer-events` on the disabled element.
188
-
189
- ```html
190
- <div>
191
- <span class="d-inline-block" tabindex="0" v-b-tooltip.top title="Disabled tooltip">
192
- <b-button variant="primary" style="pointer-events: none;" disabled>Disabled button</b-button>
193
- </span>
194
- </div>
195
-
196
- <!-- disabled-trigger-element.vue -->
197
- ```
198
-
199
- ### Caveats with `focus` trigger on `<button>` elements
200
-
201
- For proper cross-browser and cross-platform behavior when using only the `focus` trigger, you must
202
- use an element that renders the `<a>` tag, not the `<button>` tag, and you also must include a
203
- `tabindex="0"` attribute.
204
-
205
- The following will generate an `<a>` that looks like a button:
206
-
207
- ```html
208
- <b-button
209
- href="#"
210
- tabindex="0"
211
- v-b-tooltip.focus
212
- title="Tooltip title"
213
- >
214
- Link button with tooltip directive
215
- </b-button>
216
- ```
217
-
218
- ### Dismiss on next click
219
-
220
- Use both `click` and `blur` if you would like a tooltip that opens only on click of the element, but
221
- will close when anything else in the document is clicked or receives focus.
222
-
223
- Note that your element **must** be in the document tab sequence for this to work. If your element is
224
- not tabbable, add the `tabindex="0"` attribute to the element.
225
-
226
- ## Title content
227
-
228
- There are several options for providing the title of a tooltip.
229
-
230
- By default, tooltip will use the `title` attribute of the element as the tooltip content. The title
231
- can also be passed as an object to `v-b-tooltip` in the form of
232
-
233
- <!-- eslint-disable no-unused-vars -->
234
-
235
- ```js
236
- const options = {
237
- title: 'This is the title'
238
- }
239
- ```
240
-
241
- If your title content has basic HTML markup, then you will also need to set the `html` property to
242
- true, or use the directive modifier `html`
243
-
244
- <!-- eslint-disable no-unused-vars -->
245
-
246
- ```js
247
- // Object format with HTML
248
- const options = {
249
- title: 'This is the <strong>title</strong>',
250
- html: true
251
- }
252
- ```
253
-
254
- Title can also be a function reference, which is called each time the tooltip is opened. To make the
255
- title returned by a function reactive while open, set the title to a _new_ function reference
256
- whenever the content changes.
257
-
258
- ```html
259
- <template>
260
- <b-container>
261
- <b-row class="text-center">
262
- <b-col md="3" class="py-3">
263
- <b-button v-b-tooltip.hover :title="'Tip from title attribute ' + date" variant="success">Title</b-button>
264
- </b-col>
265
- <b-col md="3" class="py-3">
266
- <b-button v-b-tooltip.hover="'String Tip'" variant="success">String</b-button>
267
- </b-col>
268
- <b-col md="3" class="py-3">
269
- <b-button v-b-tooltip.hover.html="tipData" variant="success">Data</b-button>
270
- </b-col>
271
- <b-col md="3" class="py-3">
272
- <b-button v-b-tooltip.hover.html="tipMethod" variant="success">Method</b-button>
273
- </b-col>
274
- </b-row>
275
- </b-container>
276
- </template>
277
-
278
- <script>
279
- export default {
280
- data() {
281
- return {
282
- tipData: { title: 'Tooltip <em>Message</em>' },
283
- date: new Date(),
284
- timer: null
285
- }
286
- },
287
- mounted() {
288
- this.timer = setInterval(() => {
289
- this.date = new Date()
290
- }, 1000)
291
- },
292
- beforeDestroy() {
293
- clearInterval(this.timer)
294
- },
295
- methods: {
296
- tipMethod() {
297
- // Note this is called each time the tooltip is first opened.
298
- return '<strong>' + new Date() + '</strong>'
299
- }
300
- }
301
- }
302
- </script>
303
-
304
- <!-- b-tooltip-content.vue -->
305
- ```
306
-
307
- ## Variants and custom class
308
-
309
- BootstrapVue's tooltips support contextual color variants via our custom CSS, either by using
310
- directive modifiers or config options:
311
-
312
- ```html
313
- <template>
314
- <b-container fluid>
315
- <b-row class="text-center">
316
- <b-col>
317
- <b-button v-b-tooltip.hover.v-danger title="Danger variant">Danger Modifier</b-button>
318
- </b-col>
319
- <b-col>
320
- <b-button v-b-tooltip.hover="{ variant: 'info' }" title="Info variant">Info Config</b-button>
321
- </b-col>
322
- </b-row>
323
- </b-container>
324
- </template>
325
- <!-- b-tooltip-variants.vue -->
326
- ```
327
-
328
- Bootstrap default theme variants are: `danger`, `warning`, `success`, `primary`, `secondary`,
329
- `info`, `light`, and `dark`. You can change or add additional variants via Bootstrap
330
- [SCSS variables](/docs/reference/theming)
331
-
332
- A custom class can be applied to the tooltip outer wrapper `<div>` by using the `customClass` option
333
- property:
334
-
335
- ```html
336
- <b-button v-b-tooltip.hover="{ customClass: 'my-tooltip-class' }" title="Tooltip">Button</b-button>
337
- ```
338
-
339
- ## Directive syntax and usage
340
-
341
- ```html
342
- <b-button v-b-tooltip:[container].[mod1].[mod2].[...].[modN]="<value>">Button</b-button>
343
- ```
344
-
345
- Where `[container]` can be (optional):
346
-
347
- - An element ID (minus the #) to place the tooltip markup in
348
- - If not provided, tooltips are appended to the `body`. If the trigger element is inside a modal,
349
- the tooltip will be appended to the modal's container
350
-
351
- Where `[modX]` can be (all optional):
352
-
353
- - Positioning: `top`, `bottom`, `left`, `right`, `auto`, `topleft`, `topright`, `bottomleft`,
354
- `bottomright`, `lefttop`, `leftbottom`, `righttop`, or `rightbottom` (last one found wins,
355
- defaults to `top`).
356
- - Event trigger: `click`, `hover`, `focus`, `blur` (if none specified, defaults to `focus` and
357
- `hover`. `blur` is a close handler only, and if specified by itself, will be converted to
358
- `focus`). Use `manual` if you only want to control the visibility manually.
359
- - `nofade` to turn off animation.
360
- - `html` to enable rendering raw HTML. By default HTML is escaped and converted to text.
361
- - A delay value in the format of `d###` (where `###` is in ms, defaults to `50`), applied to both
362
- `hide` and `show`.
363
- - A show delay value in the format of `ds###` (where `###` is in ms, defaults to `50`), applied to
364
- `show` trigger only.
365
- - A hide delay value in the format of `dh###` (where `###` is in ms, defaults to `50`), applied to
366
- `hide` trigger only.
367
- - An offset value in pixels in the format of `o###` (where `###` is the number of pixels, defaults
368
- to `0`. Negative values allowed).
369
- - A boundary setting of `window` or `viewport`. The element to constrain the visual placement of the
370
- tooltip. If not specified, the boundary defaults to the trigger element's scroll parent (in most
371
- cases this will suffice).
372
- - A contextual variant in the form of `v-XXX` (where `XXX` is the color variant name).
373
- - `noninteractive` to make the tooltip not user-interactive.
374
-
375
- Where `<value>` can be (optional):
376
-
377
- - A string containing the title of the tooltip
378
- - A function reference to generate the title of the tooltip (receives one arg which is a reference
379
- to the DOM element triggering the tooltip)
380
- - An object containing more complex configuration of tooltip. See below for accepted object
381
- properties:
382
-
383
- **Options configuration object properties:**
384
-
385
- | Property | Type | Default | Description |
386
- | ------------------- | ----------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
387
- | `animation` | Boolean | `true` | Apply a CSS fade transition to the tooltip |
388
- | `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 |
389
- | `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 }` |
390
- | `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 |
391
- | `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 |
392
- | `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 |
393
- | `trigger` | String | `'hover focus'` | How tooltip is triggered: `click`, `hover`, `focus`. You may pass multiple triggers; separate them with a space |
394
- | `offset` | Number or String | `0` | Offset of the tooltip relative to its target. For more information refer to Popper.js's offset docs |
395
- | `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 |
396
- | `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 |
397
- | `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 |
398
- | `interactive` | Boolean | `true` | Whether the tooltip should be user-interactive |
399
- | `variant` | String | `null` | Contextual color variant for the tooltip |
400
- | `customClass` | String | `null` | A custom classname to apply to the tooltip outer wrapper element |
401
- | `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 |
402
- | `disabled` | Boolean | `false` | Set to `true` to disable the tooltip |
403
-
404
- ### Usage
405
-
406
- **Simplest usage:**
407
-
408
- ```
409
- v-b-tooltip="'This is a Tooltip!'"
410
- ```
411
-
412
- or use the element's `title` attribute for the tooltip content:
413
-
414
- ```
415
- v-b-tooltip title="This is a title Tooltip"
416
- ```
417
-
418
- **Placement examples:**
419
-
420
- ```
421
- v-b-tooltip.bottom
422
- v-b-tooltip.right
423
- ```
424
-
425
- **Variant examples:**
426
-
427
- ```
428
- v-b-tooltip.v-primary => `primary` variant
429
- v-b-tooltip.v-danger => `danger` variant
430
- ```
431
-
432
- **Trigger examples:**
433
-
434
- ```
435
- v-b-tooltip.hover => Hover only
436
- v-b-tooltip.click => Click only
437
- v-b-tooltip.hover.focus => Both hover and focus
438
- ```
439
-
440
- **Combo:**
441
-
442
- ```
443
- v-b-tooltip.hover.bottom => Show on hover and place at bottom
444
- v-b-tooltip.bottom.hover => Same as above
445
- v-b-tooltip.bottom.hover.v-danger => Same as above, but with variant
446
- ```
447
-
448
- **Object:**
449
-
450
- ```
451
- v-b-tooltip="{ title: 'Title', placement: 'bottom', variant: 'danger' }"
452
- ```
453
-
454
- ## Hiding and showing tooltips via \$root events
455
-
456
- You can close (hide) **all open tooltips** by emitting the `bv::hide::tooltip` event on \$root:
457
-
458
- ```js
459
- this.$root.$emit('bv::hide::tooltip')
460
- ```
461
-
462
- To close a **specific tooltip**, pass the trigger element's `id`, or the `id` of the tooltip (if one
463
- was provided in the config object) as the first argument:
464
-
465
- ```js
466
- this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id')
467
- ```
468
-
469
- To open a **specific tooltip**, pass the trigger element's `id`, or the `id` of the tooltip (if one
470
- was provided in the config object) as the first argument when emitting the `bv::show::tooltip`
471
- \$root event:
472
-
473
- ```js
474
- this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id')
475
- ```
476
-
477
- To open all popovers simultaneously, omit the `id` argument when emitting the `bv::show::tooltip`
478
- event.
479
-
480
- These events work for both the component **and** directive versions of tooltip.
481
-
482
- Note the **trigger element** must exist in the DOM and be in a visible state in order for the
483
- tooltip to show.
484
-
485
- ## Disabling and enabling tooltips via \$root events
486
-
487
- You can disable **all open tooltips** by emitting the `bv::disable::tooltip` event on \$root:
488
-
489
- ```js
490
- this.$root.$emit('bv::disable::tooltip')
491
- ```
492
-
493
- To disable a **specific tooltip**, pass the trigger element's `id`, or the `id` of the tooltip (if
494
- one was provided in the config object) as the first argument:
495
-
496
- ```js
497
- this.$root.$emit('bv::disable::tooltip', 'my-trigger-button-id')
498
- ```
499
-
500
- To enable a **specific tooltip**, pass the trigger element's `id`, or the `id` of the tooltip (if
501
- one was provided in the config object) as the first argument when emitting the `bv::enable::tooltip`
502
- \$root event:
503
-
504
- ```js
505
- this.$root.$emit('bv::enable::tooltip', 'my-trigger-button-id')
506
- ```
507
-
508
- To enable all popovers simultaneously, omit the `id` argument when emitting the
509
- `bv::enable::tooltip` event.
510
-
511
- These events work for both the component **and** directive versions of tooltip.
512
-
513
- Note the **trigger element** must exist in the DOM in order for the tooltip to be enabled or
514
- disabled.
515
-
516
- ## See also
517
-
518
- - [tooltip](?path=/docs/base-tooltip--docs)
519
- - [popover](?path=/docs/base-popover--docs)
520
-
521
- <!-- Directive reference section auto generated from directive package.json -->
@@ -1,131 +0,0 @@
1
- {
2
- "name": "@bootstrap-vue/tooltip",
3
- "version": "0.0.0",
4
- "meta": {
5
- "title": "Tooltip",
6
- "description": "Add custom BootstrapVue tooltips to any element. Tooltips can be triggered by hovering, focusing, or clicking an element.",
7
- "directive": "VBTooltip",
8
- "arg": {
9
- "pattern": "[a-zA-Z][a-zA-Z0-9_\\-]*",
10
- "description": "ID of element to append the tooltip markup when visible. Optional, defaults to the body",
11
- "required": false
12
- },
13
- "expression": [
14
- "String",
15
- "Function",
16
- "Object"
17
- ],
18
- "modifiers": [
19
- {
20
- "name": "top",
21
- "description": "Positions the tooltip on the top of the trigger element (default)"
22
- },
23
- {
24
- "name": "right",
25
- "description": "Positions the tooltip on the right of the trigger element"
26
- },
27
- {
28
- "name": "left",
29
- "description": "Positions the tooltip on the left of the trigger element"
30
- },
31
- {
32
- "name": "bottom",
33
- "description": "Positions the tooltip on the bottom of the trigger element"
34
- },
35
- {
36
- "name": "auto",
37
- "description": "Positions the tooltip in the best fit place around the trigger element"
38
- },
39
- {
40
- "name": "topright",
41
- "description": "Positions the tooltip on the top-right of the trigger element"
42
- },
43
- {
44
- "name": "topleft",
45
- "description": "Positions the tooltip on the top-left of the trigger element"
46
- },
47
- {
48
- "name": "bottomright",
49
- "description": "Positions the tooltip on the bottom-right of the trigger element"
50
- },
51
- {
52
- "name": "bottomleft",
53
- "description": "Positions the tooltip on the bottom-left of the trigger element"
54
- },
55
- {
56
- "name": "lefttop",
57
- "description": "Positions the tooltip on the left-top of the trigger element"
58
- },
59
- {
60
- "name": "leftbottom",
61
- "description": "Positions the tooltip on the left-bottom of the trigger element"
62
- },
63
- {
64
- "name": "righttop",
65
- "description": "Positions the tooltip on the right-top of the trigger element"
66
- },
67
- {
68
- "name": "rightbottom",
69
- "description": "Positions the tooltip on the right-bottom of the trigger element"
70
- },
71
- {
72
- "name": "hover",
73
- "description": "Trigger the tooltip on hovering"
74
- },
75
- {
76
- "name": "click",
77
- "description": "Trigger the tooltip on clicking"
78
- },
79
- {
80
- "name": "focus",
81
- "description": "Trigger the tooltip on focusing"
82
- },
83
- {
84
- "name": "nofade",
85
- "description": "Disabled the fade animation of the tooltip"
86
- },
87
- {
88
- "name": "html",
89
- "description": "Enables basic HTML in the title",
90
- "xss": true
91
- },
92
- {
93
- "name": "interactive",
94
- "description": "Wether the tooltip should be user-interactive"
95
- },
96
- {
97
- "name": "viewport",
98
- "description": "Sets the boundary constraint to the viewport"
99
- },
100
- {
101
- "name": "window",
102
- "description": "Sets the boundary constrain to the window"
103
- },
104
- {
105
- "name": "v-{variant}",
106
- "pattern": "v-[a-z]+",
107
- "description": "Sets the tooltip contextual color variant to `{variant}`"
108
- },
109
- {
110
- "name": "d{###}",
111
- "pattern": "d[0-9]+",
112
- "description": "The show and hide delay in milliseconds (where `{###}` is the value in milliseconds)"
113
- },
114
- {
115
- "name": "ds{###}",
116
- "pattern": "ds[0-9]+",
117
- "description": "The show delay in milliseconds (where `{###}` is the value in milliseconds)"
118
- },
119
- {
120
- "name": "dh{###}",
121
- "pattern": "dh[0-9]+",
122
- "description": "The hide delay in milliseconds (where `{###}` is the value in milliseconds)"
123
- },
124
- {
125
- "name": "o{###}",
126
- "pattern": "o-?[0-9]+",
127
- "description": "An offset value in pixels (where `{###}` is the number of pixels, defaults to 0. Negative values allowed)"
128
- }
129
- ]
130
- }
131
- }