remove jquery references from tooltip docs

1 files changed, 31 insertions, 25 deletions

diff --git a/site/content/docs/4.3/components/tooltips.md b/site/content/docs/4.3/components/tooltips.md
index 0ecf71cca..adf3da039 100644
--- a/site/content/docs/4.3/components/tooltips.md
+++ b/site/content/docs/4.3/components/tooltips.md
@@ -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:
 
 {{< highlight js >}}
-$(function () {
-  $('[data-toggle="tooltip"]').tooltip()
+var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl)
 })
 {{< /highlight >}}
 
@@ -88,7 +89,8 @@ The tooltip plugin generates content and markup on demand, and by default places
 Trigger the tooltip via JavaScript:
 
 {{< highlight js >}}
-$('#example').tooltip(options)
+var exampleEl = document.getElementById('example')
+var tooltip = new bootstrap.Tooltip(exampleEl, options)
 {{< /highlight >}}
 
 {{< 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'`:
 
 {{< highlight js >}}
-$('#example').tooltip({ boundary: 'window' })
+var exampleEl = document.getElementById('example')
+var tooltip = new bootstrap.Tooltip(exampleEl, {
+  boundary: 'window'
+})
 {{< /highlight >}}
 {{< /callout >}}
 
@@ -291,57 +296,53 @@ Options for individual tooltips can alternatively be specified through the use o
 {{< partial "callout-danger-async-methods.md" >}}
 {{< /callout >}}
 
-#### `$().tooltip(options)`
-
-Attaches a tooltip handler to an element collection.
-
-#### `.tooltip('show')`
+#### 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.
 
-{{< 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.
 
-{{< 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.
 
-{{< 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.
 
-{{< 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.**
 
-{{< 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.
 
-{{< 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.
 
-{{< highlight js >}}$('#element').tooltip('toggleEnabled'){{< /highlight >}}
+{{< highlight js >}}tooltip.toggleEnabled(){{< /highlight >}}
 
-#### `.tooltip('update')`
+#### update
 
 Updates the position of an element's tooltip.
 
-{{< highlight js >}}$('#element').tooltip('update'){{< /highlight >}}
+{{< highlight js >}}tooltip.update(){{< /highlight >}}
 
 ### Events
 
@@ -377,7 +378,12 @@ Updates the position of an element's tooltip.
 </table>
 
 {{< 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...
 })
+
+tooltip.hide()
 {{< /highlight >}}