1 module uim.bootstrap.bs5.demos.components.tooltips; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/tooltips", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Tooltips - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 auto linkExample = demoBs5Example("link", "Link", 19 H5Div( 20 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 50px; }", 21 "data-js":"var tooltipTriggerElements = document.querySelectorAll('[data-bs-toggle="tooltip"]'); for (var i = 0; i < tooltipTriggerElements.length; i++) { 	new bootstrap.Tooltip(tooltipTriggerElements[i]) }"], 22 H5H3(["text-muted"], "Link"), 23 H5Div( 24 H5A(["href":"#", "data-bs-toggle":"tooltip", "title":"Tooltip on top"], "Tooltip for link")), 25 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 50px; }", "data-js":"var tooltipTriggerElements = document.querySelectorAll('", 26 "data-bs-toggle":""tooltip"]'); for (var i = 0; i < tooltipTriggerElements.length; i++) { 	new bootstrap.Tooltip(tooltipTriggerElements[i]) }"], 27 H5H3(["text-muted"], "Button"), 28 H5Div( 29 BS5Button(["btn-secondary"], ["data-bs-toggle":"tooltip", "title":"Tooltip on top"], "Tooltip for button")))) 30 ), ``, ``); 31 32 auto customExample = demoBs5Example("custom", "Custom HTML", 33 H5Div( 34 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 50px; }", 35 "data-js":"var tooltipTriggerElements = document.querySelectorAll('[data-bs-toggle="tooltip"]'); for (var i = 0; i < tooltipTriggerElements.length; i++) { 	new bootstrap.Tooltip(tooltipTriggerElements[i]) }"], 36 H5H3(["text-muted"], "Custom HTML"), 37 H5Div( 38 BS5Button(["btn-secondary"], ["data-bs-toggle":"tooltip", "title":"<strong>Tooltip</strong> <small>with</small> <span class='badge bg-primary'>custom</span> <em>HTML</em>", "data-bs-html":"true"], "Tooltip with custom HTML"))) 39 ), ``, ``); 40 41 auto positionExample = demoBs5Example("position", "Position", 42 H5Div( 43 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 50px; }", 44 "data-js":"var tooltipTriggerElements = document.querySelectorAll('[data-bs-toggle="tooltip"]'); for (var i = 0; i < tooltipTriggerElements.length; i++) { 	new bootstrap.Tooltip(tooltipTriggerElements[i]) }"], 45 H5H3(["text-muted"], "Position"), 46 H5Div( 47 BS5Button(["btn-secondary"], ["data-bs-toggle":"tooltip", "title":"Tooltip on top", "data-bs-placement":"top"], "Tooltip on top"), 48 BS5Button(["btn-secondary"], ["data-bs-toggle":"tooltip", "title":"Tooltip on right", "data-bs-placement":"right"], "Tooltip on right"), 49 BS5Button(["btn-secondary"], ["data-bs-toggle":"tooltip", "title":"Tooltip on bottom", "data-bs-placement":"bottom"], "Tooltip on bottom"), 50 BS5Button(["btn-secondary"], ["data-bs-toggle":"tooltip", "title":"Tooltip on left", "data-bs-placement":"left"], "Tooltip on left"))), 51 ), ``, ``); 52 53 auto animationExample = demoBs5Example("animation", "Animation", 54 H5Div( 55 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 50px; }", 56 "data-js":"var tooltipTriggerElements = document.querySelectorAll('[data-bs-toggle="tooltip"]'); for (var i = 0; i < tooltipTriggerElements.length; i++) { 	new bootstrap.Tooltip(tooltipTriggerElements[i]) }"], 57 H5H3(["text-muted"], "Animation"), 58 H5Div( 59 BS5Button(["btn-secondary"], ["data-bs-toggle":"tooltip", "title":"Tooltip without animation", "data-bs-animation":"false"], "Tooltip without animation"))) 60 ), ``, ``); 61 62 auto hidingExample = demoBs5Example("hiding", "Hiding", 63 H5Div( 64 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 50px; }", 65 "data-js":"var tooltipTriggerElements = document.querySelectorAll('[data-bs-toggle="tooltip"]'); for (var i = 0; i < tooltipTriggerElements.length; i++) { 	new bootstrap.Tooltip(tooltipTriggerElements[i]) }"], 66 H5H3(["text-muted"], "Delay"), 67 H5P("Tooltip with delay in ms for showing and hiding"), 68 H5Div( 69 BS5Button(["btn-secondary"], ["data-bs-toggle":"tooltip", "title":"Tooltip with delay", "data-bs-delay":"500"], "Tooltip with delay"))) 70 ), ``, ``); 71 72 auto triggerExample = demoBs5Example("trigger", "Trigger type", 73 H5Div( 74 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 50px; }", 75 "data-js":"var tooltipTriggerElements = document.querySelectorAll('[data-bs-toggle="tooltip"]'); for (var i = 0; i < tooltipTriggerElements.length; i++) { 	new bootstrap.Tooltip(tooltipTriggerElements[i]) }"], 76 H5H3(["text-muted"], "Trigger type"), 77 H5P("Tooltip triggered by click only"), 78 H5Div( 79 BS5Button(["btn-secondary"], ["data-bs-toggle":"tooltip", "title":"Triggered by click", "data-bs-trigger":"click"], "Trigger by click"))) 80 ), ``, ``); 81 82 auto disabledExample = demoBs5Example("disabled", "Disabled elements", 83 H5Div( 84 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 50px; }", 85 "data-js":"var tooltipTriggerElements = document.querySelectorAll('[data-bs-toggle="tooltip"]'); for (var i = 0; i < tooltipTriggerElements.length; i++) { 	new bootstrap.Tooltip(tooltipTriggerElements[i]) }"], 86 H5H3(["text-muted"], "Disabled elements"), 87 H5Div( 88 H5Span(["d-inline-block"], ["tabindex":"0", "data-bs-toggle":"tooltip", "title":"Tooltip for disabled element"], 89 BS5Button(["btn-secondary"], ["disabled":"disabled", "style":"pointer-events: none;"], "Tooltip for disabled element")))) 90 ), ``, ``); 91 92 return 93 H5Main(["style":"margin-top:70px;"], 94 H5Div(["container-fluid", "mt-3", "bg-light"], 95 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 96 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Tooltips")), 97 98 BS5Container(["mt-3"]).row( 99 H5Div(["col-12", "col-lg-2"], 100 listLevels("basic"), 101 listAreas("basic", "components"), 102 listSections("basic", "components", "tooltips")), 103 H5Div(["col-12", "col-lg-8"], 104 dateInfo(this), 105 H5H2(["display-4"], "Tooltips"), 106 H5Hr, 107 108 linkExample, 109 customExample, 110 positionExample, 111 animationExample, 112 hidingExample, 113 triggerExample, 114 disabledExample 115 116 ), 117 H5Div(["col-12", "col-lg-2"]))).toString; 118 } 119 }); 120 }