tooltip without jquery

5 files changed, 74 insertions, 64 deletions

diff --git a/js/tests/unit/dom/eventHandler.js b/js/tests/unit/dom/eventHandler.js
index 0730e3846..7404d6c32 100644
--- a/js/tests/unit/dom/eventHandler.js
+++ b/js/tests/unit/dom/eventHandler.js
@@ -254,4 +254,18 @@ $(function () {
     EventHandler.trigger(element, 'click')
     document.body.removeChild(element)
   })
+
+  QUnit.test('off should remove a listener registered by .one', function (assert) {
+    assert.expect(0)
+
+    var element = document.createElement('div')
+    var handler = function () {
+      assert.notOk(true, 'listener called')
+    }
+
+    EventHandler.one(element, 'foobar', handler)
+    EventHandler.off(element, 'foobar', handler)
+
+    EventHandler.trigger(element, 'foobar')
+  })
 })
diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index f4b04ded5..593391c54 100644
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -65,7 +65,7 @@ $(function () {
     assert.expect(1)
     var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>').bootstrapPopover()
 
-    assert.ok($popover.data('bs.popover'), 'popover instance exists')
+    assert.ok(Data.getData($popover[0], 'bs.popover'), 'popover instance exists')
   })
 
   QUnit.test('should store popover trigger in popover instance data object', function (assert) {
@@ -76,7 +76,7 @@ $(function () {
 
     $popover.bootstrapPopover('show')
 
-    assert.ok($('.popover').data('bs.popover'), 'popover trigger stored in instance data')
+    assert.ok(Data.getData($('.popover')[0], 'bs.popover'), 'popover trigger stored in instance data')
   })
 
   QUnit.test('should get title and content from options', function (assert) {
@@ -252,24 +252,20 @@ $(function () {
   })
 
   QUnit.test('should destroy popover', function (assert) {
-    assert.expect(7)
+    assert.expect(3)
     var $popover = $('<div/>')
       .bootstrapPopover({
         trigger: 'hover'
       })
       .on('click.foo', $.noop)
 
-    assert.ok($popover.data('bs.popover'), 'popover has data')
-    assert.ok($._data($popover[0], 'events').mouseover && $._data($popover[0], 'events').mouseout, 'popover has hover event')
-    assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover has extra click.foo event')
+    assert.ok(Data.getData($popover[0], 'bs.popover'), 'popover has data')
 
     $popover.bootstrapPopover('show')
     $popover.bootstrapPopover('dispose')
 
     assert.ok(!$popover.hasClass('show'), 'popover is hidden')
     assert.ok(!$popover.data('popover'), 'popover does not have data')
-    assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo')
-    assert.ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')
   })
 
   QUnit.test('should render popover element using delegated selector', function (assert) {
@@ -342,7 +338,7 @@ $(function () {
         assert.ok(false, 'should not fire any popover events')
       })
       .bootstrapPopover('hide')
-    assert.strictEqual(typeof $popover.data('bs.popover'), 'undefined', 'should not initialize the popover')
+    assert.ok(Data.getData($popover[0], 'bs.popover') === null, 'should not initialize the popover')
   })
 
   QUnit.test('should fire inserted event', function (assert) {
@@ -440,11 +436,11 @@ $(function () {
       })
 
     $popover.bootstrapPopover('disable')
-    $popover.trigger($.Event('click'))
+    EventHandler.trigger($popover[0], 'click')
     setTimeout(function () {
       assert.strictEqual($('.popover').length === 0, true)
       $popover.bootstrapPopover('enable')
-      $popover.trigger($.Event('click'))
+      EventHandler.trigger($popover[0], 'click')
     }, 200)
   })
 
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index e66450fb8..d2729fa64 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -118,13 +118,11 @@ $(function () {
 
     $tooltip
       .one('shown.bs.tooltip', function () {
-        assert.ok($('.tooltip')
-          .is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied')
-
+        assert.ok($('.tooltip').is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied')
         $tooltip.bootstrapTooltip('hide')
       })
       .one('hidden.bs.tooltip', function () {
-        assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed')
+        assert.strictEqual(Data.getData($tooltip[0], 'bs.tooltip').tip.parentNode, null, 'tooltip removed')
         done()
       })
       .bootstrapTooltip('show')
@@ -145,7 +143,7 @@ $(function () {
         $tooltip.bootstrapTooltip('hide')
       })
       .one('hidden.bs.tooltip', function () {
-        assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed')
+        assert.strictEqual(Data.getData($tooltip[0], 'bs.tooltip').tip.parentNode, null, 'tooltip removed')
         done()
       })
       .bootstrapTooltip('show')
@@ -207,7 +205,7 @@ $(function () {
         $tooltip.bootstrapTooltip('hide')
       })
       .one('hidden.bs.tooltip', function () {
-        assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed')
+        assert.strictEqual(Data.getData($tooltip[0], 'bs.tooltip').tip.parentNode, null, 'tooltip removed')
         done()
       })
       .bootstrapTooltip('show')
@@ -333,22 +331,18 @@ $(function () {
   })
 
   QUnit.test('should destroy tooltip', function (assert) {
-    assert.expect(7)
+    assert.expect(3)
     var $tooltip = $('<div/>')
       .bootstrapTooltip()
       .on('click.foo', function () {})  // eslint-disable-line no-empty-function
 
-    assert.ok($tooltip.data('bs.tooltip'), 'tooltip has data')
-    assert.ok($._data($tooltip[0], 'events').mouseover && $._data($tooltip[0], 'events').mouseout, 'tooltip has hover events')
-    assert.strictEqual($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip has extra click.foo event')
+    assert.ok(Data.getData($tooltip[0], 'bs.tooltip'), 'tooltip has data')
 
     $tooltip.bootstrapTooltip('show')
     $tooltip.bootstrapTooltip('dispose')
 
     assert.ok(!$tooltip.hasClass('show'), 'tooltip is hidden')
-    assert.ok(!$._data($tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
-    assert.strictEqual($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip still has click.foo')
-    assert.ok(!$._data($tooltip[0], 'events').mouseover && !$._data($tooltip[0], 'events').mouseout, 'tooltip does not have hover events')
+    assert.ok(!Data.getData($tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
   })
 
   // QUnit.test('should show tooltip with delegate selector on click', function (assert) {
@@ -477,7 +471,7 @@ $(function () {
         trigger: 'manual'
       })
       .on('inserted.bs.tooltip', function () {
-        var $tooltip = $($(this).data('bs.tooltip').tip)
+        var $tooltip = $(Data.getData(this, 'bs.tooltip').tip)
         assert.ok($tooltip.hasClass('bs-tooltip-right'))
         assert.ok(typeof $tooltip.attr('style') === 'undefined')
         $styles.remove()
@@ -587,7 +581,7 @@ $(function () {
       done()
     }, 200)
 
-    $tooltip.trigger('mouseenter')
+    EventHandler.trigger($tooltip[0], 'mouseover')
   })
 
   QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
@@ -602,7 +596,7 @@ $(function () {
 
     setTimeout(function () {
       assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
-      $tooltip.trigger('mouseout')
+      EventHandler.trigger($tooltip[0], 'mouseout')
     }, 100)
 
     setTimeout(function () {
@@ -610,7 +604,7 @@ $(function () {
       done()
     }, 200)
 
-    $tooltip.trigger('mouseenter')
+    EventHandler.trigger($tooltip[0], 'mouseover')
   })
 
   QUnit.test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function (assert) {
@@ -628,11 +622,11 @@ $(function () {
 
     setTimeout(function () {
       assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active')
-      $tooltip.trigger('mouseout')
+      EventHandler.trigger($tooltip[0], 'mouseout')
 
       setTimeout(function () {
         assert.ok($('.tooltip').is('.fade.show'), '100ms: tooltip still faded active')
-        $tooltip.trigger('mouseenter')
+        EventHandler.trigger($tooltip[0], 'mouseover')
       }, 100)
 
       setTimeout(function () {
@@ -641,7 +635,7 @@ $(function () {
       }, 200)
     }, 0)
 
-    $tooltip.trigger('mouseenter')
+    EventHandler.trigger($tooltip[0], 'mouseover')
   })
 
   QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
@@ -656,7 +650,7 @@ $(function () {
 
     setTimeout(function () {
       assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
-      $tooltip.trigger('mouseout')
+      EventHandler.trigger($tooltip[0], 'mouseout')
     }, 100)
 
     setTimeout(function () {
@@ -664,7 +658,7 @@ $(function () {
       done()
     }, 200)
 
-    $tooltip.trigger('mouseenter')
+    EventHandler.trigger($tooltip[0], 'mouseover')
   })
 
   QUnit.test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function (assert) {
@@ -682,7 +676,7 @@ $(function () {
 
     setTimeout(function () {
       assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
-      $tooltip.trigger('mouseout')
+      EventHandler.trigger($tooltip[0], 'mouseout')
     }, 100)
 
     setTimeout(function () {
@@ -690,7 +684,7 @@ $(function () {
       done()
     }, 250)
 
-    $tooltip.trigger('mouseenter')
+    EventHandler.trigger($tooltip[0], 'mouseover')
   })
 
   QUnit.test('should wait 200ms before hiding the tooltip', function (assert) {
@@ -707,21 +701,21 @@ $(function () {
       })
 
     setTimeout(function () {
-      assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '1ms: tooltip faded active')
+      assert.ok($(Data.getData($tooltip[0], 'bs.tooltip').tip).is('.fade.show'), '1ms: tooltip faded active')
 
-      $tooltip.trigger('mouseout')
+      EventHandler.trigger($tooltip[0], 'mouseout')
 
       setTimeout(function () {
-        assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '100ms: tooltip still faded active')
+        assert.ok($(Data.getData($tooltip[0], 'bs.tooltip').tip).is('.fade.show'), '100ms: tooltip still faded active')
       }, 100)
 
       setTimeout(function () {
-        assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.show'), '200ms: tooltip removed')
+        assert.ok(!$(Data.getData($tooltip[0], 'bs.tooltip').tip).is('.show'), '200ms: tooltip removed')
         done()
       }, 200)
     }, 0)
 
-    $tooltip.trigger('mouseenter')
+    EventHandler.trigger($tooltip[0], 'mouseover')
   })
 
   QUnit.test('should not reload the tooltip on subsequent mouseenter events', function (assert) {
@@ -746,11 +740,11 @@ $(function () {
       title: titleHtml
     })
 
-    $('#tt-outer').trigger('mouseenter')
+    EventHandler.trigger($('#tt-outer')[0], 'mouseover')
 
     var currentUid = $('#tt-content').text()
 
-    $('#tt-content').trigger('mouseenter')
+    EventHandler.trigger($('#tt-outer')[0], 'mouseover')
     assert.strictEqual(currentUid, $('#tt-content').text())
   })
 
@@ -776,18 +770,18 @@ $(function () {
       title: titleHtml
     })
 
-    var obj = $tooltip.data('bs.tooltip')
+    var obj = Data.getData($tooltip[0], 'bs.tooltip')
 
-    $('#tt-outer').trigger('mouseenter')
+    EventHandler.trigger($('#tt-outer')[0], 'mouseover')
 
     var currentUid = $('#tt-content').text()
 
-    $('#tt-outer').trigger('mouseleave')
+    EventHandler.trigger($('#tt-outer')[0], 'mouseout')
     assert.strictEqual(currentUid, $('#tt-content').text())
 
     assert.ok(obj._hoverState === 'out', 'the tooltip hoverState should be set to "out"')
 
-    $('#tt-outer').trigger('mouseenter')
+    EventHandler.trigger($('#tt-outer')[0], 'mouseover')
     assert.ok(obj._hoverState === 'show', 'the tooltip hoverState should be set to "show"')
 
     assert.strictEqual(currentUid, $('#tt-content').text())
@@ -802,7 +796,7 @@ $(function () {
         assert.ok(false, 'should not fire any tooltip events')
       })
       .bootstrapTooltip('hide')
-    assert.strictEqual(typeof $tooltip.data('bs.tooltip'), 'undefined', 'should not initialize the tooltip')
+    assert.ok(Data.getData($tooltip[0], 'bs.tooltip') === null, 'should not initialize the tooltip')
   })
 
   QUnit.test('should not remove tooltip if multiple triggers are set and one is still active', function (assert) {
@@ -813,7 +807,8 @@ $(function () {
         trigger: 'click hover focus',
         animation: false
       })
-    var tooltip = $el.data('bs.tooltip')
+
+    var tooltip = Data.getData($el[0], 'bs.tooltip')
     var $tooltip = $(tooltip.getTipElement())
 
     function showingTooltip() {
@@ -821,28 +816,28 @@ $(function () {
     }
 
     var tests = [
-      ['mouseenter', 'mouseleave'],
+      ['mouseover', 'mouseout'],
 
       ['focusin', 'focusout'],
 
       ['click', 'click'],
 
-      ['mouseenter', 'focusin', 'focusout', 'mouseleave'],
-      ['mouseenter', 'focusin', 'mouseleave', 'focusout'],
+      ['mouseover', 'focusin', 'focusout', 'mouseout'],
+      ['mouseover', 'focusin', 'mouseout', 'focusout'],
 
-      ['focusin', 'mouseenter', 'mouseleave', 'focusout'],
-      ['focusin', 'mouseenter', 'focusout', 'mouseleave'],
+      ['focusin', 'mouseover', 'mouseout', 'focusout'],
+      ['focusin', 'mouseover', 'focusout', 'mouseout'],
 
-      ['click', 'focusin', 'mouseenter', 'focusout', 'mouseleave', 'click'],
-      ['mouseenter', 'click', 'focusin', 'focusout', 'mouseleave', 'click'],
-      ['mouseenter', 'focusin', 'click', 'click', 'mouseleave', 'focusout']
+      ['click', 'focusin', 'mouseover', 'focusout', 'mouseout', 'click'],
+      ['mouseover', 'click', 'focusin', 'focusout', 'mouseout', 'click'],
+      ['mouseover', 'focusin', 'click', 'click', 'mouseout', 'focusout']
     ]
 
     assert.ok(!showingTooltip())
 
     $.each(tests, function (idx, triggers) {
       for (var i = 0, len = triggers.length; i < len; i++) {
-        $el.trigger(triggers[i])
+        EventHandler.trigger($el[0], triggers[i])
         assert.equal(i < len - 1, showingTooltip())
       }
     })
@@ -857,20 +852,20 @@ $(function () {
         animation: false
       })
 
-    var tooltip = $el.data('bs.tooltip')
+    var tooltip = Data.getData($el[0], 'bs.tooltip')
     var $tooltip = $(tooltip.getTipElement())
 
     function showingTooltip() {
       return $tooltip.hasClass('show') || tooltip._hoverState === 'show'
     }
 
-    $el.trigger('click')
+    EventHandler.trigger($el[0], 'click')
     assert.ok(showingTooltip(), 'tooltip is faded in')
 
     $el.bootstrapTooltip('hide')
     assert.ok(!showingTooltip(), 'tooltip was faded out')
 
-    $el.trigger('click')
+    EventHandler.trigger($el[0], 'click')
     assert.ok(showingTooltip(), 'tooltip is faded in again')
   })
 
@@ -952,7 +947,7 @@ $(function () {
       .appendTo('#qunit-fixture')
       .bootstrapTooltip('show')
       .on('hidden.bs.tooltip', function () {
-        var tooltip = $el.data('bs.tooltip')
+        var tooltip = Data.getData($el[0], 'bs.tooltip')
         var $tooltip = $(tooltip.getTipElement())
         assert.ok($tooltip.hasClass('tooltip'))
         assert.ok($tooltip.hasClass('fade'))
@@ -968,7 +963,7 @@ $(function () {
     var $el = $('<a href="#" rel="tooltip" title="7"/>')
       .appendTo('#qunit-fixture')
       .on('shown.bs.tooltip', function () {
-        var tooltip = $el.data('bs.tooltip')
+        var tooltip = Data.getData($el[0], 'bs.tooltip')
         var $tooltip = $(tooltip.getTipElement())
         assert.strictEqual($tooltip.children().text(), '7')
         done()
@@ -990,11 +985,11 @@ $(function () {
       })
 
     $trigger.bootstrapTooltip('disable')
-    $trigger.trigger($.Event('click'))
+    EventHandler.trigger($trigger[0], 'click')
     setTimeout(function () {
       assert.strictEqual($('.tooltip').length === 0, true)
       $trigger.bootstrapTooltip('enable')
-      $trigger.trigger($.Event('click'))
+      EventHandler.trigger($trigger[0], 'click')
     }, 200)
   })
 
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index e422891da..0acc6c1c0 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -33,7 +33,9 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
+    <script src="../../dist/dom/selectorEngine.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tooltip.js"></script>
     <script src="../../dist/popover.js"></script>
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index c340ae274..601732a38 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -73,6 +73,9 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/data.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
+    <script src="../../dist/dom/selectorEngine.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tooltip.js"></script>
     <script>