@gitlab/ui 114.1.0 → 114.1.2

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 (141) hide show
  1. package/dist/components/base/breadcrumb/breadcrumb.js +4 -16
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/package.json +7 -26
  5. package/src/components/base/breadcrumb/breadcrumb.scss +18 -2
  6. package/src/components/base/breadcrumb/breadcrumb.vue +4 -17
  7. package/CHANGELOG.md +0 -13139
  8. package/src/vendor/bootstrap/LICENSE +0 -11
  9. package/src/vendor/bootstrap-vue/LICENSE +0 -11
  10. package/src/vendor/bootstrap-vue/package.json +0 -144
  11. package/src/vendor/bootstrap-vue/src/components/button/MODIFICATIONS.md +0 -16
  12. package/src/vendor/bootstrap-vue/src/components/button/README.md +0 -240
  13. package/src/vendor/bootstrap-vue/src/components/button/button-close.spec.js +0 -210
  14. package/src/vendor/bootstrap-vue/src/components/button/button.spec.js +0 -349
  15. package/src/vendor/bootstrap-vue/src/components/button/package.json +0 -105
  16. package/src/vendor/bootstrap-vue/src/components/dropdown/README.md +0 -730
  17. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-divider.spec.js +0 -58
  18. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-form.spec.js +0 -110
  19. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-group.spec.js +0 -94
  20. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-header.spec.js +0 -73
  21. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.spec.js +0 -117
  22. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item.spec.js +0 -147
  23. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-text.spec.js +0 -59
  24. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.spec.js +0 -1121
  25. package/src/vendor/bootstrap-vue/src/components/dropdown/package.json +0 -368
  26. package/src/vendor/bootstrap-vue/src/components/form/README.md +0 -365
  27. package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.spec.js +0 -170
  28. package/src/vendor/bootstrap-vue/src/components/form/form-text.spec.js +0 -93
  29. package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.spec.js +0 -157
  30. package/src/vendor/bootstrap-vue/src/components/form/form.spec.js +0 -97
  31. package/src/vendor/bootstrap-vue/src/components/form/package.json +0 -112
  32. package/src/vendor/bootstrap-vue/src/components/form-checkbox/README.md +0 -691
  33. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group.spec.js +0 -525
  34. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox.spec.js +0 -922
  35. package/src/vendor/bootstrap-vue/src/components/form-checkbox/package.json +0 -172
  36. package/src/vendor/bootstrap-vue/src/components/form-group/README.md +0 -339
  37. package/src/vendor/bootstrap-vue/src/components/form-group/form-group.spec.js +0 -477
  38. package/src/vendor/bootstrap-vue/src/components/form-group/package.json +0 -183
  39. package/src/vendor/bootstrap-vue/src/components/form-radio/README.md +0 -437
  40. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio-group.spec.js +0 -357
  41. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio.spec.js +0 -587
  42. package/src/vendor/bootstrap-vue/src/components/form-radio/package.json +0 -162
  43. package/src/vendor/bootstrap-vue/src/components/form-select/README.md +0 -504
  44. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option-group.spec.js +0 -138
  45. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option.spec.js +0 -75
  46. package/src/vendor/bootstrap-vue/src/components/form-select/form-select.spec.js +0 -723
  47. package/src/vendor/bootstrap-vue/src/components/form-select/package.json +0 -132
  48. package/src/vendor/bootstrap-vue/src/components/form-textarea/README.md +0 -453
  49. package/src/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.spec.js +0 -1000
  50. package/src/vendor/bootstrap-vue/src/components/form-textarea/package.json +0 -122
  51. package/src/vendor/bootstrap-vue/src/components/layout/README.md +0 -791
  52. package/src/vendor/bootstrap-vue/src/components/layout/col.spec.js +0 -192
  53. package/src/vendor/bootstrap-vue/src/components/layout/form-row.spec.js +0 -45
  54. package/src/vendor/bootstrap-vue/src/components/layout/package.json +0 -99
  55. package/src/vendor/bootstrap-vue/src/components/link/README.md +0 -76
  56. package/src/vendor/bootstrap-vue/src/components/link/link.spec.js +0 -434
  57. package/src/vendor/bootstrap-vue/src/components/link/package.json +0 -57
  58. package/src/vendor/bootstrap-vue/src/components/modal/MODIFICATIONS.md +0 -30
  59. package/src/vendor/bootstrap-vue/src/components/modal/README.md +0 -1067
  60. package/src/vendor/bootstrap-vue/src/components/modal/helpers/bv-modal-event.class.spec.js +0 -82
  61. package/src/vendor/bootstrap-vue/src/components/modal/modal.spec.js +0 -1418
  62. package/src/vendor/bootstrap-vue/src/components/modal/package.json +0 -544
  63. package/src/vendor/bootstrap-vue/src/components/nav/README.md +0 -362
  64. package/src/vendor/bootstrap-vue/src/components/nav/nav-item.spec.js +0 -127
  65. package/src/vendor/bootstrap-vue/src/components/nav/nav.spec.js +0 -177
  66. package/src/vendor/bootstrap-vue/src/components/nav/package.json +0 -73
  67. package/src/vendor/bootstrap-vue/src/components/popover/README.md +0 -919
  68. package/src/vendor/bootstrap-vue/src/components/popover/package.json +0 -261
  69. package/src/vendor/bootstrap-vue/src/components/popover/popover.spec.js +0 -198
  70. package/src/vendor/bootstrap-vue/src/components/table/README.md +0 -3157
  71. package/src/vendor/bootstrap-vue/src/components/table/helpers/default-sort-compare.spec.js +0 -112
  72. package/src/vendor/bootstrap-vue/src/components/table/helpers/normalize-fields.spec.js +0 -93
  73. package/src/vendor/bootstrap-vue/src/components/table/package.json +0 -1763
  74. package/src/vendor/bootstrap-vue/src/components/table/table-busy.spec.js +0 -150
  75. package/src/vendor/bootstrap-vue/src/components/table/table-caption.spec.js +0 -176
  76. package/src/vendor/bootstrap-vue/src/components/table/table-colgroup.spec.js +0 -81
  77. package/src/vendor/bootstrap-vue/src/components/table/table-filtering.spec.js +0 -409
  78. package/src/vendor/bootstrap-vue/src/components/table/table-item-formatter.spec.js +0 -56
  79. package/src/vendor/bootstrap-vue/src/components/table/table-lite.spec.js +0 -682
  80. package/src/vendor/bootstrap-vue/src/components/table/table-pagination.spec.js +0 -133
  81. package/src/vendor/bootstrap-vue/src/components/table/table-primarykey.spec.js +0 -83
  82. package/src/vendor/bootstrap-vue/src/components/table/table-provider.spec.js +0 -411
  83. package/src/vendor/bootstrap-vue/src/components/table/table-row-details.spec.js +0 -459
  84. package/src/vendor/bootstrap-vue/src/components/table/table-selectable.spec.js +0 -1182
  85. package/src/vendor/bootstrap-vue/src/components/table/table-simple.spec.js +0 -206
  86. package/src/vendor/bootstrap-vue/src/components/table/table-sorting.spec.js +0 -858
  87. package/src/vendor/bootstrap-vue/src/components/table/table-sticky-column.spec.js +0 -377
  88. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-bottom-row.spec.js +0 -94
  89. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-row-events.spec.js +0 -529
  90. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-top-row.spec.js +0 -88
  91. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-transition.spec.js +0 -83
  92. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-custom.spec.js +0 -91
  93. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-events.spec.js +0 -137
  94. package/src/vendor/bootstrap-vue/src/components/table/table-thead-events.spec.js +0 -155
  95. package/src/vendor/bootstrap-vue/src/components/table/table-thead-top.spec.js +0 -96
  96. package/src/vendor/bootstrap-vue/src/components/table/table.spec.js +0 -692
  97. package/src/vendor/bootstrap-vue/src/components/tabs/README.md +0 -433
  98. package/src/vendor/bootstrap-vue/src/components/tabs/package.json +0 -205
  99. package/src/vendor/bootstrap-vue/src/components/tabs/tab.spec.js +0 -330
  100. package/src/vendor/bootstrap-vue/src/components/tabs/tabs.spec.js +0 -778
  101. package/src/vendor/bootstrap-vue/src/components/toast/README.md +0 -655
  102. package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.spec.js +0 -117
  103. package/src/vendor/bootstrap-vue/src/components/toast/package.json +0 -184
  104. package/src/vendor/bootstrap-vue/src/components/toast/toast.spec.js +0 -294
  105. package/src/vendor/bootstrap-vue/src/components/toast/toaster.spec.js +0 -77
  106. package/src/vendor/bootstrap-vue/src/components/tooltip/README.md +0 -559
  107. package/src/vendor/bootstrap-vue/src/components/tooltip/package.json +0 -258
  108. package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.spec.js +0 -1240
  109. package/src/vendor/bootstrap-vue/src/components/transition/package.json +0 -5
  110. package/src/vendor/bootstrap-vue/src/components/transporter/package.json +0 -5
  111. package/src/vendor/bootstrap-vue/src/components/transporter/transporter.spec.js +0 -85
  112. package/src/vendor/bootstrap-vue/src/directives/modal/modal.spec.js +0 -191
  113. package/src/vendor/bootstrap-vue/src/directives/tooltip/README.md +0 -521
  114. package/src/vendor/bootstrap-vue/src/directives/tooltip/package.json +0 -131
  115. package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.spec.js +0 -190
  116. package/src/vendor/bootstrap-vue/src/directives/visible/README.md +0 -244
  117. package/src/vendor/bootstrap-vue/src/directives/visible/package.json +0 -24
  118. package/src/vendor/bootstrap-vue/src/mixins/attrs.spec.js +0 -194
  119. package/src/vendor/bootstrap-vue/src/mixins/click-out.spec.js +0 -52
  120. package/src/vendor/bootstrap-vue/src/mixins/focus-in.spec.js +0 -53
  121. package/src/vendor/bootstrap-vue/src/mixins/listen-on-document.spec.js +0 -117
  122. package/src/vendor/bootstrap-vue/src/mixins/listen-on-root.spec.js +0 -77
  123. package/src/vendor/bootstrap-vue/src/mixins/listen-on-window.spec.js +0 -115
  124. package/src/vendor/bootstrap-vue/src/mixins/listeners.spec.js +0 -245
  125. package/src/vendor/bootstrap-vue/src/utils/bv-event.class.spec.js +0 -66
  126. package/src/vendor/bootstrap-vue/src/utils/clone-deep.spec.js +0 -70
  127. package/src/vendor/bootstrap-vue/src/utils/config.spec.js +0 -169
  128. package/src/vendor/bootstrap-vue/src/utils/css-escape.spec.js +0 -82
  129. package/src/vendor/bootstrap-vue/src/utils/dom.spec.js +0 -291
  130. package/src/vendor/bootstrap-vue/src/utils/events.spec.js +0 -41
  131. package/src/vendor/bootstrap-vue/src/utils/get.spec.js +0 -109
  132. package/src/vendor/bootstrap-vue/src/utils/inspect.spec.js +0 -251
  133. package/src/vendor/bootstrap-vue/src/utils/loose-equal.spec.js +0 -203
  134. package/src/vendor/bootstrap-vue/src/utils/normalize-slot.spec.js +0 -63
  135. package/src/vendor/bootstrap-vue/src/utils/number.spec.js +0 -72
  136. package/src/vendor/bootstrap-vue/src/utils/object.spec.js +0 -61
  137. package/src/vendor/bootstrap-vue/src/utils/props.spec.js +0 -112
  138. package/src/vendor/bootstrap-vue/src/utils/router.spec.js +0 -248
  139. package/src/vendor/bootstrap-vue/src/utils/string.spec.js +0 -65
  140. package/src/vendor/bootstrap-vue/src/utils/stringify-object-values.spec.js +0 -47
  141. 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
- }