diff options
Diffstat (limited to 'js/tests/visual/tooltip.html')
-rw-r--r-- | js/tests/visual/tooltip.html | 54 |
1 files changed, 40 insertions, 14 deletions
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 779ac1aaf5..9a65640b44 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -66,42 +66,68 @@ <div id="shadow" class="pt-5"></div> </div> <div id="customContainer"></div> + + <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> </div> <script src="../../../dist/js/bootstrap.bundle.js"></script> <script> if (typeof document.body.attachShadow === 'function') { - var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' }) + const shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' }) shadowRoot.innerHTML = - '<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' + + '<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">' + ' Tooltip on top in a shadow dom' + '</button>' + - '<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">' + + '<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">' + ' Tooltip on top in a shadow dom' + '</button>' - var firstChildTooltip = new bootstrap.Tooltip(shadowRoot.firstChild) - var secondChildTooltip = new bootstrap.Tooltip(shadowRoot.getElementById('secondTooltip'), { + new bootstrap.Tooltip(shadowRoot.firstChild) + new bootstrap.Tooltip(shadowRoot.getElementById('secondShadowTooltip'), { container: shadowRoot }) } - var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]') - for (const tooltipEl of tooltipElements) { - new bootstrap.Tooltip(tooltipEl) - } - var tooltipElement = document.getElementById('tooltipElement') - var tooltipElementInstance = new bootstrap.Tooltip(tooltipElement, { - container: document.getElementById('customContainer') + new bootstrap.Tooltip('#tooltipElement', { + container: '#customContainer' }) - var target = document.getElementById('target') - var targetTooltip = new bootstrap.Tooltip(target, { + const targetTooltip = new bootstrap.Tooltip('#target', { placement : 'top', trigger : 'manual' }) targetTooltip.show() + + document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl=> new bootstrap.Tooltip(tooltipEl)) </script> + + <script> + new bootstrap.Tooltip('#wrapperTriggeredBySelector', { + animation: false, + selector: '.bs-dynamic-tooltip' + }) + + function duplicateButtons() { + const buttonsBlock = document.querySelector('.selectorButtonsBlock')// get first + const buttonsBlockClone = buttonsBlock.cloneNode(true) + buttonsBlockClone.innerHTML+= new Date().toLocaleString() + document.querySelector('#wrapperTriggeredBySelector').append(buttonsBlockClone) + } + </script> + </body> </html> |