bootstrap.native
Version:
Bootstrap components build with Typescript
32 lines (31 loc) • 4.98 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BSN Testing Page</title>
<link id="bsCSS" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="container" style="padding: 3rem">
<h3>Tooltip Example</h3>
<div class="btn-toolbar mb-3">
<button id="tooltipElementContent" type="button" class="btn btn-primary me-1 mb-1" data-cy="tooltip" data-bs-placement="left">Left</button>
<a href="#" id="tooltipWithEvents" class="btn btn-dark me-1 mb-1" data-cy="tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="<b>Tooltip on top</b><br>This tooltip example has all events attached">Events</a>
<button type="button" class="btn btn-secondary me-1 mb-1" data-cy="tooltip" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="<b>Tooltip on bottom with <code>focus</code> event</b><br>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Bottom</button>
<button type="button" class="btn btn-success me-1 mb-1" data-cy="tooltip" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="<b>Tooltip on right</b><br>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Right</button>
<button type="button" class="btn btn-warning me-1 mb-1" data-cy="tooltip" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-title="<b>Tooltip only on click</b> <span class='badge bg-success'>NEW</span><br>Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Click</button>
<button id="tooltipTemplateExample" type="button" class="btn btn-danger me-1 mb-1" data-cy="tooltip" data-bs-title="<b>Top TEMPLATE</b> <span class='badge bg-danger'>HOT</span><br>This tooltip will be added to a position: relative container. Check out the <code>scripts.js</code> file for this template example sample code. Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip.">Template</button>
<button type="button" class="btn btn-outline-secondary position-absolute me-1 mb-1 d-none" data-cy="tooltip" style="top:0; right: 0;" data-bs-toggle="tooltip" data-bs-placement="left" data-container="#tooltipExamples" data-bs-title="Tooltip on absolute position element. This requires a position: relative container.">Absolute</button>
<input style="max-width: 100px; display: inline; vertical-align: bottom;" data-cy="tooltip" type="text" value="" class="form-control me-1 mb-1" placeholder="Focus me" data-bs-toggle="tooltip" data-bs-title="Tooltip only on focus" data-bs-trigger="focus">
<div class="position-static d-flex" id="staticContainer">
<button type="button" class="btn btn-info me-1 mb-1" data-cy="tooltip" data-bs-toggle="tooltip" data-bs-container="#staticContainer" data-bs-title="<b>Tooltip in static container</b><br>This tooltip is added to a position: static container. If the configured container belongs to parent with position: relative, the component will bypass the configuration.">Static</button>
</div>
<svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class="me-1 mb-1" data-cy="tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="<b>Demo Tooltip for </b> <span class='badge bg-success'>SVG</span><br>Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
<rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
<text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
</svg>
<img class="me-1 mb-1" data-cy="tooltip" data-bs-toggle="tooltip" data-bs-placement="top" alt="Demo Tooltip for IMG" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODAgNDMiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgIDxyZWN0IGZpbGw9IndoaXRlIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcng9IjUiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgIDx0ZXh0IGRpcmVjdGlvbj0ibHRyIiBmaWxsPSIjMzMzIiB4PSIyNSIgeT0iMjUiIGZvbnQtc2l6ZT0iMTQiPklNRzwvdGV4dD4NCiAgICAgICAgICAgICAgICA8L3N2Zz4=" title="<b>Demo Tooltip for </b> <span class='badge bg-info'>IMG</span><br>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
</div>
</main>
</body>
</html>