diff options
| author | Johann-S <johann.servoire@gmail.com> | 2017-11-30 12:54:27 +0300 |
|---|---|---|
| committer | Johann-S <johann.servoire@gmail.com> | 2018-12-05 18:02:59 +0300 |
| commit | b16127fc105f159ebd06b02df2853941b2aba67c (patch) | |
| tree | 45f5a0138c633e0e3aa6bd5357ffef4d14c8bc6f /js/tests/visual/tooltip.html | |
| parent | 850d99bb13b895b83a860c38092755253ceb5b4a (diff) | |
Allow Tooltips/Popovers to work in shadow DOM
Diffstat (limited to 'js/tests/visual/tooltip.html')
| -rw-r--r-- | js/tests/visual/tooltip.html | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 436f5c1cd8..831f26d0a7 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -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] |