popover-open-overflow-display.tentative.html (1023B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel=author href="mailto:masonf@chromium.org"> 4 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 6 <link rel=match href="popover-open-overflow-display-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-2"> 8 9 <div id=container> 10 <div popover id=p1>This is popover 1<div id=anchor2></div></div> 11 <div popover id=p2 anchor=anchor2>This is popover 2<div id=anchor3></div></div> 12 <div popover id=p3 anchor=anchor3>This is popover 3</div> 13 </div> 14 15 <style> 16 #container { 17 overflow:hidden; 18 position: absolute; 19 top: 100px; 20 left: 50px; 21 width: 30px; 22 height: 30px; 23 } 24 #p2 { 25 position: absolute; 26 top: 100px; 27 } 28 #p3 { 29 position: relative; 30 top:200px; 31 } 32 </style> 33 34 <script> 35 document.querySelector('#p1').showPopover(); 36 document.querySelector('#p2').showPopover(); 37 document.querySelector('#p3').showPopover(); 38 </script>