mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00
Code Issues Releases Wiki Activity

tooltip without jquery

Browse Source
This commit is contained in:
Alessandro Chitolina
2017-09-21 18:04:47 +02:00
committed by XhmikosR
parent 7c1d0a1097
commit cc6e130fc1
11 changed files with 306 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
js/tests/unit/dom/eventHandler.js
View File

@@ -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')
})
})

18
js/tests/unit/popover.js
View File

@@ -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)
})

101
js/tests/unit/tooltip.js
View File

@@ -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)
})

2
js/tests/visual/popover.html
View File

@@ -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>

3
js/tests/visual/tooltip.html
View File

@@ -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>