mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Docs: update documentation js examples, using es6 (#36203)

Browse Source 
* Docs: update components documentation using es6

* Docs: update js blocks around docs, using es6

* Docs: update components documentation using es6

* Test linter
This commit is contained in:
GeoSot
2022-04-26 19:38:41 +03:00
committed by GitHub
parent 3edead4ffe
commit 00d45b11e7
21 changed files with 504 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/components/tooltips.md
+12 -17
View File
@@ -37,10 +37,8 @@ Got all that? Great, let's see how they work with some examples.
As mentioned above, you must initialize tooltips before they can be used. One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute, like so:
```js
var tooltipTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
```
### Tooltips on links
@@ -139,8 +137,8 @@ The tooltip plugin generates content and markup on demand, and by default places
Trigger the tooltip via JavaScript:
```js
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)
```
{{< callout warning >}}
@@ -149,8 +147,7 @@ var tooltip = new bootstrap.Tooltip(exampleEl, options)
Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
```js
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
const tooltip = new bootstrap.Tooltip('#example', {
boundary: document.body // or document.querySelector('#boundary')
})
```
@@ -233,9 +230,9 @@ Options for individual tooltips can alternatively be specified through the use o
#### Using function with `popperConfig`
```js
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
const tooltip = new bootstrap.Tooltip(element, {
popperConfig(defaultBsPopperConfig) {
// const newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
@@ -265,9 +262,7 @@ var tooltip = new bootstrap.Tooltip(element, {
{{< /bs-table >}}
```js
// getOrCreateInstance example
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance
// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })
@@ -291,10 +286,10 @@ The `setContent` method accepts an `object` argument, where each property-key is
{{< /bs-table >}}
```js
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
// do something...
})