mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-15 10:05:40 +02:00
Code Issues Releases Wiki Activity

Allow Tooltips/Popovers to work in shadow DOM

Browse Source
This commit is contained in:
Johann-S
2017-11-30 10:54:27 +01:00
parent 850d99bb13
commit b16127fc10
6 changed files with 86 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,7 +62,12 @@
</button>
</p>
</div>
<div id="target" title="Test tooltip on transformed element"></div>
<div class="row">
<div class="col-sm-3">
<div id="target" title="Test tooltip on transformed element"></div>
</div>
<div id="shadow" class="pt-5"></div>
</div>
<div id="customContainer"></div>
</div>
@@ -72,6 +77,21 @@
<script src="../../dist/tooltip.js"></script>
<script>
$(function () {
if (typeof document.body.attachShadow === 'function') {
var shadowRoot = $('#shadow')[0].attachShadow({ mode: 'open' })
shadowRoot.innerHTML =
'<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-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-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom with container option">' +
' Tooltip on top in a shadow dom' +
'</button>'
$(shadowRoot.firstChild).tooltip()
$(shadowRoot.getElementById('secondTooltip')).tooltip({
container: shadowRoot
})
}
$('[data-toggle="tooltip"]').tooltip()
$('#tooltipElement').tooltip({
container: $('#customContainer')[0]