2017-10-03 18:34:59 +02:00
<!doctype html>
2017-10-22 14:02:24 +02:00
< html lang = "en" >
2016-11-12 16:12:58 +01:00
< head >
< meta charset = "utf-8" >
2019-02-27 16:47:41 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2020-10-22 08:38:15 +02:00
< link href = "../../../dist/css/bootstrap.min.css" rel = "stylesheet" >
2016-11-12 16:12:58 +01:00
< title > Tooltip< / title >
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 >
2016-11-12 16:12:58 +01:00
< / head >
< body >
< div class = "container" >
< h1 > Tooltip < small > Bootstrap Visual Test< / small > < / h1 >
2014-06-08 04:11:44 +02:00
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 >
2014-06-08 04:11:44 +02:00
2016-11-12 16:12:58 +01:00
< hr >
2014-06-08 04:11:44 +02:00
2018-05-30 09:41:05 +02:00
< div class = "row" >
< p >
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" >
2018-05-30 09:41:05 +02:00
Tooltip on auto
< / button >
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" >
2018-05-30 09:41:05 +02:00
Tooltip on top
< / button >
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" >
2020-06-26 16:06:20 +02:00
Tooltip on end
2018-05-30 09:41:05 +02:00
< / button >
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" >
2018-05-30 09:41:05 +02:00
Tooltip on bottom
< / button >
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" >
2020-06-26 16:06:20 +02:00
Tooltip on start
2018-05-30 09:41:05 +02:00
< / button >
< / p >
< / div >
< div class = "row" >
< p >
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)>" >
2018-05-30 09:41:05 +02:00
Tooltip with XSS
< / button >
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" >
2018-12-05 10:25:00 +01:00
Tooltip with container (selector)
< / button >
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)" >
2018-12-05 10:25:00 +01:00
Tooltip with container (element)
2018-05-30 09:41:05 +02:00
< / button >
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>" >
2018-05-30 09:41:05 +02:00
Tooltip with HTML
< / button >
< / p >
< / div >
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 >
2018-05-30 09:41:05 +02:00
< div id = "customContainer" > < / div >
2016-11-12 16:12:58 +01:00
< / div >
2014-06-08 04:11:44 +02:00
2018-10-13 15:05:43 +02:00
< script src = "../../../node_modules/popper.js/dist/umd/popper.min.js" > < / script >
2019-05-08 15:11:24 +02:00
< script src = "../../dist/dom/selector-engine.js" > < / script >
< script src = "../../dist/dom/event-handler.js" > < / script >
2018-06-17 23:09:04 +02:00
< script src = "../../dist/dom/manipulator.js" > < / script >
2017-09-21 18:04:47 +02:00
< script src = "../../dist/dom/data.js" > < / script >
2016-11-12 16:12:58 +01:00
< script src = "../../dist/tooltip.js" > < / script >
< script >
2019-02-24 14:42:18 +01:00
if (typeof document.body.attachShadow === 'function') {
var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
shadowRoot.innerHTML =
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" > ' +
2019-02-24 14:42:18 +01:00
' Tooltip on top in a shadow dom' +
'< / button > ' +
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" > ' +
2019-02-24 14:42:18 +01:00
' Tooltip on top in a shadow dom' +
'< / button > '
2017-11-30 10:54:27 +01:00
2019-02-24 14:42:18 +01:00
var firstChildTooltip = new Tooltip(shadowRoot.firstChild)
var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), {
container: shadowRoot
2018-12-05 10:25:00 +01:00
})
2019-02-24 14:42:18 +01:00
}
2018-06-17 23:09:04 +02:00
2020-07-22 21:33:11 +02:00
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
2019-02-24 14:42:18 +01:00
.forEach(function (tooltip) {
new Tooltip(tooltip)
2018-06-17 23:09:04 +02:00
})
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'
2016-11-12 16:12:58 +01:00
})
2019-02-24 14:42:18 +01:00
targetTooltip.show()
2016-11-12 16:12:58 +01:00
< / script >
< / body >
2014-06-08 04:11:44 +02:00
< / html >