mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
remove jquery references from tooltip docs
This commit is contained in:
parent
976e825d26
commit
803088c526
@ -32,8 +32,9 @@ Got all that? Great, let's see how they work with some examples.
|
|||||||
One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
|
One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
|
||||||
|
|
||||||
{{< highlight js >}}
|
{{< highlight js >}}
|
||||||
$(function () {
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
|
||||||
$('[data-toggle="tooltip"]').tooltip()
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||||
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||||
})
|
})
|
||||||
{{< /highlight >}}
|
{{< /highlight >}}
|
||||||
|
|
||||||
@ -88,7 +89,8 @@ The tooltip plugin generates content and markup on demand, and by default places
|
|||||||
Trigger the tooltip via JavaScript:
|
Trigger the tooltip via JavaScript:
|
||||||
|
|
||||||
{{< highlight js >}}
|
{{< highlight js >}}
|
||||||
$('#example').tooltip(options)
|
var exampleEl = document.getElementById('example')
|
||||||
|
var tooltip = new bootstrap.Tooltip(exampleEl, options)
|
||||||
{{< /highlight >}}
|
{{< /highlight >}}
|
||||||
|
|
||||||
{{< callout warning >}}
|
{{< callout warning >}}
|
||||||
@ -97,7 +99,10 @@ $('#example').tooltip(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, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`:
|
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, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`:
|
||||||
|
|
||||||
{{< highlight js >}}
|
{{< highlight js >}}
|
||||||
$('#example').tooltip({ boundary: 'window' })
|
var exampleEl = document.getElementById('example')
|
||||||
|
var tooltip = new bootstrap.Tooltip(exampleEl, {
|
||||||
|
boundary: 'window'
|
||||||
|
})
|
||||||
{{< /highlight >}}
|
{{< /highlight >}}
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
@ -291,57 +296,53 @@ Options for individual tooltips can alternatively be specified through the use o
|
|||||||
{{< partial "callout-danger-async-methods.md" >}}
|
{{< partial "callout-danger-async-methods.md" >}}
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
#### `$().tooltip(options)`
|
#### show
|
||||||
|
|
||||||
Attaches a tooltip handler to an element collection.
|
|
||||||
|
|
||||||
#### `.tooltip('show')`
|
|
||||||
|
|
||||||
Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
|
Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').tooltip('show'){{< /highlight >}}
|
{{< highlight js >}}tooltip.show(){{< /highlight >}}
|
||||||
|
|
||||||
#### `.tooltip('hide')`
|
#### hide
|
||||||
|
|
||||||
Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
|
Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').tooltip('hide'){{< /highlight >}}
|
{{< highlight js >}}tooltip.hide(){{< /highlight >}}
|
||||||
|
|
||||||
#### `.tooltip('toggle')`
|
#### toggle
|
||||||
|
|
||||||
Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
|
Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').tooltip('toggle'){{< /highlight >}}
|
{{< highlight js >}}tooltip.toggle(){{< /highlight >}}
|
||||||
|
|
||||||
#### `.tooltip('dispose')`
|
#### dispose
|
||||||
|
|
||||||
Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
|
Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').tooltip('dispose'){{< /highlight >}}
|
{{< highlight js >}}tooltip.dispose(){{< /highlight >}}
|
||||||
|
|
||||||
#### `.tooltip('enable')`
|
#### enable
|
||||||
|
|
||||||
Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**
|
Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').tooltip('enable'){{< /highlight >}}
|
{{< highlight js >}}tooltip.enable(){{< /highlight >}}
|
||||||
|
|
||||||
#### `.tooltip('disable')`
|
#### disable
|
||||||
|
|
||||||
Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
|
Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').tooltip('disable'){{< /highlight >}}
|
{{< highlight js >}}tooltip.disable(){{< /highlight >}}
|
||||||
|
|
||||||
#### `.tooltip('toggleEnabled')`
|
#### toggleEnabled
|
||||||
|
|
||||||
Toggles the ability for an element's tooltip to be shown or hidden.
|
Toggles the ability for an element's tooltip to be shown or hidden.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').tooltip('toggleEnabled'){{< /highlight >}}
|
{{< highlight js >}}tooltip.toggleEnabled(){{< /highlight >}}
|
||||||
|
|
||||||
#### `.tooltip('update')`
|
#### update
|
||||||
|
|
||||||
Updates the position of an element's tooltip.
|
Updates the position of an element's tooltip.
|
||||||
|
|
||||||
{{< highlight js >}}$('#element').tooltip('update'){{< /highlight >}}
|
{{< highlight js >}}tooltip.update(){{< /highlight >}}
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
@ -377,7 +378,12 @@ Updates the position of an element's tooltip.
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
{{< highlight js >}}
|
{{< highlight js >}}
|
||||||
$('#myTooltip').on('hidden.bs.tooltip', function () {
|
var myTooltipEl = document.getElementById('myTooltip')
|
||||||
|
var tooltip = new bootstrap.Tooltip(myTooltipEl)
|
||||||
|
|
||||||
|
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
|
||||||
// do something...
|
// do something...
|
||||||
})
|
})
|
||||||
|
|
||||||
|
tooltip.hide()
|
||||||
{{< /highlight >}}
|
{{< /highlight >}}
|
||||||
|
Loading…
Reference in New Issue
Block a user