mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00
Code Issues Releases Wiki Activity

fix: add trick to support tooltip selector usage on dynamic created tooltips that utilize title attribute (#36914)

Browse Source
This commit is contained in:
GeoSot
2022-09-14 16:24:37 +03:00
committed by GitHub
parent 4600a25404
commit 3bd5756414
2 changed files with 58 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
js/tests/visual/tooltip.html
View File

@@ -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>