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 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 >
2021-08-23 17:33:55 +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)>" >
Tooltip with XSS
< / button >
2018-05-30 09:41:05 +02:00
< / 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
2022-01-30 15:12:24 +01:00
< script src = "../../../dist/js/bootstrap.bundle.js" > < / script >
2016-11-12 16:12:58 +01:00
< 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
2022-01-30 15:12:24 +01:00
var firstChildTooltip = new bootstrap.Tooltip(shadowRoot.firstChild)
var secondChildTooltip = new bootstrap.Tooltip(shadowRoot.getElementById('secondTooltip'), {
2019-02-24 14:42:18 +01:00
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
2021-09-06 09:46:03 +02:00
var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
for (const tooltipEl of tooltipElements) {
2022-01-30 15:12:24 +01:00
new bootstrap.Tooltip(tooltipEl)
2021-09-06 09:46:03 +02:00
}
2019-02-24 14:42:18 +01:00
var tooltipElement = document.getElementById('tooltipElement')
2022-01-30 15:12:24 +01:00
var tooltipElementInstance = new bootstrap.Tooltip(tooltipElement, {
2019-02-24 14:42:18 +01:00
container: document.getElementById('customContainer')
})
var target = document.getElementById('target')
2022-01-30 15:12:24 +01:00
var targetTooltip = new bootstrap.Tooltip(target, {
2019-02-24 14:42:18 +01:00
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 >
