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
2023-01-17 00:55:28 +01:00
< p class = "text-body-secondary" > 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 >
2022-09-14 15:24:37 +02:00
< div class = "row mt-4 border-top" >
< hr >
< div class = "h4" > Test Selector triggered tooltips< / div >
< div id = "wrapperTriggeredBySelector" >
< div class = "py-2 selectorButtonsBlock" >
< button type = "button" class = "btn btn-secondary bs-dynamic-tooltip" title = "random title" > Using title< / button >
< button type = "button" class = "btn btn-secondary bs-dynamic-tooltip" data-bs-title = "random title" > Using bs-title< / button >
< / div >
< / div >
< div class = "mt-3" >
< button type = "button" class = "btn btn-primary" onclick = "duplicateButtons()" > Duplicate above two buttons< / button >
< / div >
< / 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 >
2022-09-27 21:53:59 +02:00
/* global bootstrap: false */
2019-02-24 14:42:18 +01:00
if (typeof document.body.attachShadow === 'function') {
2022-09-14 15:24:37 +02:00
const shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
2019-02-24 14:42:18 +01:00
shadowRoot.innerHTML =
2022-09-14 15:24:37 +02:00
'< button id = "firstShadowTooltip" 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 > ' +
2022-09-14 15:24:37 +02:00
'< button id = "secondShadowTooltip" 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-09-14 15:24:37 +02:00
new bootstrap.Tooltip(shadowRoot.firstChild)
new bootstrap.Tooltip(shadowRoot.getElementById('secondShadowTooltip'), {
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
2022-09-14 15:24:37 +02:00
new bootstrap.Tooltip('#tooltipElement', {
container: '#customContainer'
2019-02-24 14:42:18 +01:00
})
2022-09-14 15:24:37 +02:00
const targetTooltip = new bootstrap.Tooltip('#target', {
2022-09-27 21:53:59 +02:00
placement: 'top',
trigger: 'manual'
2016-11-12 16:12:58 +01:00
})
2019-02-24 14:42:18 +01:00
targetTooltip.show()
2022-09-14 15:24:37 +02:00
2022-09-27 21:53:59 +02:00
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
2016-11-12 16:12:58 +01:00
< / script >
2022-09-14 15:24:37 +02:00
< script >
2022-09-27 21:53:59 +02:00
/* global bootstrap: false */
2022-09-14 15:24:37 +02:00
new bootstrap.Tooltip('#wrapperTriggeredBySelector', {
animation: false,
selector: '.bs-dynamic-tooltip'
})
2022-09-27 21:53:59 +02:00
/* eslint-disable no-unused-vars */
2022-09-14 15:24:37 +02:00
function duplicateButtons() {
const buttonsBlock = document.querySelector('.selectorButtonsBlock')// get first
const buttonsBlockClone = buttonsBlock.cloneNode(true)
2022-09-27 21:53:59 +02:00
buttonsBlockClone.innerHTML += new Date().toLocaleString()
document.querySelector('#wrapperTriggeredBySelector').append(buttonsBlockClone)
2022-09-14 15:24:37 +02:00
}
2022-09-27 21:53:59 +02:00
/* eslint-enable no-unused-vars */
2022-09-14 15:24:37 +02:00
< / script >
2016-11-12 16:12:58 +01:00
< / body >
2014-06-08 04:11:44 +02:00
< / html >
