4 <title>Popover Examples</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <link rel="stylesheet" href="../../css-bootstrap4/sb-admin-2.min.css">
9 <link rel="stylesheet" href="../../css-bootstrap4/roojs-bootstrap.css">
10 <link rel="stylesheet" href="../../fonts/font-awesome.css">
16 <script type="text/javascript" src="../../roojs-core-debug.js"></script>
17 <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
18 <!-- <script type="text/javascript" src="../../Roo/bootstrap/Popover.js"></script> -->
19 <script type="text/javascript" src="../../docs/Roo.docs.ViewSource.js"></script>
21 <script type="text/javascript">
25 <script type="text/javascript" src="../bootstrap/popover.js"></script>
30 <H1>Popover Test (auto ajusting if no room..)</H1>
32 <a href="#" onclick="Roo.docs.ViewSource.show({ src: '/roojs1/examples/bootstrap/popover.js'});">popover.js</a>
33 <a href="#" onclick="Roo.docs.ViewSource.show({ src: '/roojs1/examples/bootstrap4/popover.html'});">popover.html</a>
37 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 100px;top: 100px;">RIGHT</div>
39 <div id="right-move-test"
40 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 100px;top: 600px;">RIGHT</div>
42 <div id="left-flip-test"
43 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 100px;top: 400px;">LEFT</div>
46 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 300px;top: 100px;">BOTTOM</div>
48 <div id="below-bad-test"
49 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 300px;top: 500px;">BOTTOM</div>
51 <div id="above-bad-test"
52 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 500px;top: 100px;">TOP</div>
55 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 500px;top: 500px;">TOP</div>
59 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 1000px;top: 100px;">LEFT</div>
61 <div id="left-move-test"
62 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 1000px;top: 600px;">LEFT</div>
64 <div id="right-flip-test"
65 style="width: 100px;height: 100px;display: block;background-color: yellow;position: absolute;left: 1000px;top: 400px;">RIGHT</div>
69 <script type="text/javascript">
70 Roo.onReady(function() {
71 Roo.get('right-test').on('click', function(e) {
72 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
75 Roo.get('right-move-test').on('click', function(e) {
76 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
79 Roo.get('left-flip-test').on('click', function(e) {
80 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'left');
83 Roo.get('left-test').on('click', function(e) {
84 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'left');
87 Roo.get('left-move-test').on('click', function(e) {
88 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'left');
91 Roo.get('right-flip-test').on('click', function(e) {
92 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'right');
96 Roo.get('below-test').on('click', function(e) {
97 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'bottom');
100 Roo.get('below-bad-test').on('click', function(e) {
101 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'bottom');
104 Roo.get('above-test').on('click', function(e) {
105 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'top');
107 Roo.get('above-bad-test').on('click', function(e) {
108 Pman.Popover.FileTest.show({} , false, Roo.get(e.getTarget()), 'top');
111 //Pman.Popover.FileTest.show({ });
112 //Roo.get("bootstrap-body").on('click', function() { Pman.Popover.FileTest.show({ _el : Roo.get("bootstrap-body") }); })