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" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< link rel = "stylesheet" href = "../../../dist/css/bootstrap.min.css" >
< title > Tooltip< / title >
2017-04-14 13:30:55 +02:00
< style >
#target {
border: 1px solid;
width: 100px;
height: 50px;
border: 1px solid;
margin-left: 50px;
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
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
2016-11-12 16:12:58 +01:00
< p class = "text-muted" > Tight pants next level keffiyeh < a href = "#" data-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-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-toggle = "tooltip" title = "Another one here too" > whatever keytar< / a > , scenester farm-to-table banksy Austin < a href = "#" data-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 >
< button type = "button" class = "btn btn-secondary" data-toggle = "tooltip" data-placement = "auto" title = "Tooltip on auto" >
Tooltip on auto
< / button >
< button type = "button" class = "btn btn-secondary" data-toggle = "tooltip" data-placement = "top" title = "Tooltip on top" >
Tooltip on top
< / button >
< button type = "button" class = "btn btn-secondary" data-toggle = "tooltip" data-placement = "right" title = "Tooltip on right" >
Tooltip on right
< / button >
< button type = "button" class = "btn btn-secondary" data-toggle = "tooltip" data-placement = "bottom" title = "Tooltip on bottom" >
Tooltip on bottom
< / button >
< button type = "button" class = "btn btn-secondary" data-toggle = "tooltip" data-placement = "left" title = "Tooltip on left" >
Tooltip on left
< / button >
< / p >
< / div >
< div class = "row" >
< p >
< button type = "button" class = "btn btn-secondary" data-toggle = "tooltip" data-placement = "left" title = "Tooltip with XSS" data-container = "<img src=1 onerror=alert(123) />" >
Tooltip with XSS
< / button >
2018-12-05 10:25:00 +01:00
< button type = "button" class = "btn btn-secondary" data-toggle = "tooltip" data-placement = "left" title = "Tooltip with container (selector)" data-container = "#customContainer" >
Tooltip with container (selector)
< / button >
< button id = "tooltipElement" type = "button" class = "btn btn-secondary" data-placement = "left" title = "Tooltip with container (element)" >
Tooltip with container (element)
2018-05-30 09:41:05 +02:00
< / button >
< button type = "button" class = "btn btn-secondary" data-toggle = "tooltip" data-html = "true" title = "<em>Tooltip</em> <u>with</u> <b>HTML</b>" >
Tooltip with HTML
< / button >
< / p >
< / div >
2017-04-14 13:30:55 +02:00
< div id = "target" title = "Test tooltip on transformed element" > < / 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-07-23 20:49:21 +02:00
< script src = "../../../site/docs/4.1/assets/js/vendor/jquery-slim.min.js" > < / script >
2018-10-13 15:05:43 +02:00
< script src = "../../../node_modules/popper.js/dist/umd/popper.min.js" > < / script >
2016-11-12 16:12:58 +01:00
< script src = "../../dist/util.js" > < / script >
< script src = "../../dist/tooltip.js" > < / script >
< script >
$(function () {
$('[data-toggle="tooltip"]').tooltip()
2018-12-05 10:25:00 +01:00
$('#tooltipElement').tooltip({
container: $('#customContainer')[0]
})
2017-04-14 13:30:55 +02:00
$('#target').tooltip({
placement : 'top',
trigger : 'manual'
}).tooltip('show')
2016-11-12 16:12:58 +01:00
})
< / script >
< / body >
2014-06-08 04:11:44 +02:00
< / html >