rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Code Issues Actions Packages Releases Activity
c198eb6319
Bootstrap/js/tests/visual/tooltip.html

114 lines
5.4 KiB
HTML
Raw Normal View History

Switch to lowercase `doctype`. (#24217) Having it uppercase doesn't offer anything and the lowercase version slightly improves gzip compression.
2017-10-03 18:34:59 +02:00
<!doctype html>
Tighten htmllint's rules. (#24471)
2017-10-22 14:02:24 +02:00
<html lang="en">
Update visual tests.
2016-11-12 16:12:58 +01:00
<head>
<meta charset="utf-8">
Remove the now unneeded `shrink-to-fit` directive. (#28314)
2019-02-27 16:47:41 +01:00
<meta name="viewport" content="width=device-width, initial-scale=1">
Move `href` attribute first (#31835)
2020-10-22 08:38:15 +02:00
<link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
Update visual tests.
2016-11-12 16:12:58 +01:00
<title>Tooltip</title>
Fix unit tests + Update Popper to 1.6.0
2017-04-14 13:30:55 +02:00
<style>
#target {
border: 1px solid;
width: 100px;
height: 50px;
margin-left: 50px;
transform: rotate(270deg);
margin-top: 100px;
}
</style>
Update visual tests.
2016-11-12 16:12:58 +01:00
</head>
<body>
<div class="container">
<h1>Tooltip <small>Bootstrap Visual Test</small></h1>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
Update visual tests.
2016-11-12 16:12:58 +01:00
<hr>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
<div class="row">
<p>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="auto" title="Tooltip on auto">
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
Tooltip on auto
</button>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
Tooltip on top
</button>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
Tooltip on end
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
</button>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
Tooltip on bottom
</button>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
feat(RTL): implement RTL Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-06-26 16:06:20 +02:00
Tooltip on start
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
</button>
</p>
</div>
<div class="row">
<p>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with XSS" data-bs-container="<img src=1 onerror=alert(123)>">
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
Tooltip with XSS
</button>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with container (selector)" data-bs-container="#customContainer">
fix regression about using element for tooltip container option
2018-12-05 10:25:00 +01:00
Tooltip with container (selector)
</button>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button id="tooltipElement" type="button" class="btn btn-secondary" data-bs-placement="left" title="Tooltip with container (element)">
fix regression about using element for tooltip container option
2018-12-05 10:25:00 +01:00
Tooltip with container (element)
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
</button>
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
Tooltip with HTML
</button>
</p>
</div>
Allow Tooltips/Popovers to work in shadow DOM
2017-11-30 10:54:27 +01:00
<div class="row">
<div class="col-sm-3">
<div id="target" title="Test tooltip on transformed element"></div>
</div>
<div id="shadow" class="pt-5"></div>
</div>
fix(tooltip): xss in container option
2018-05-30 09:41:05 +02:00
<div id="customContainer"></div>
Update visual tests.
2016-11-12 16:12:58 +01:00
</div>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
Update to popper.js v2.x
2020-06-19 10:17:01 +02:00
<script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
Rename `eventHandler` and `selectorEngine` files.
2019-05-08 15:11:24 +02:00
<script src="../../dist/dom/selector-engine.js"></script>
<script src="../../dist/dom/event-handler.js"></script>
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
<script src="../../dist/dom/manipulator.js"></script>
tooltip without jquery
2017-09-21 18:04:47 +02:00
<script src="../../dist/dom/data.js"></script>
visual tests: add missing base-component dist file (#33167) Regression of #32313
2021-02-22 07:42:43 +01:00
<script src="../../dist/base-component.js"></script>
Update visual tests.
2016-11-12 16:12:58 +01:00
<script src="../../dist/tooltip.js"></script>
<script>
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
if (typeof document.body.attachShadow === 'function') {
var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
shadowRoot.innerHTML =
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
'<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' +
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
' Tooltip on top in a shadow dom' +
'</button>' +
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
'<button id="secondTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom with container option">' +
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
' Tooltip on top in a shadow dom' +
'</button>'
Allow Tooltips/Popovers to work in shadow DOM
2017-11-30 10:54:27 +01:00
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
var firstChildTooltip = new Tooltip(shadowRoot.firstChild)
var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), {
container: shadowRoot
fix regression about using element for tooltip container option
2018-12-05 10:25:00 +01:00
})
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
}
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests
2020-07-22 21:33:11 +02:00
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
.forEach(function (tooltip) {
new Tooltip(tooltip)
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
})
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
var tooltipElement = document.getElementById('tooltipElement')
var tooltipElementInstance = new Tooltip(tooltipElement, {
container: document.getElementById('customContainer')
})
var target = document.getElementById('target')
var targetTooltip = new Tooltip(target, {
placement : 'top',
trigger : 'manual'
Update visual tests.
2016-11-12 16:12:58 +01:00
})
Remove DOMContentLoaded. (#28337) There's no reason for us to wait here.
2019-02-24 14:42:18 +01:00
targetTooltip.show()
Update visual tests.
2016-11-12 16:12:58 +01:00
</script>
</body>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
</html>
Reference in New Issue Copy Permalink