popper js boilerplate

Solutions on MaxInterview for popper js boilerplate by the best coders in the world

showing results for - "popper js boilerplate"
09 Oct 2018
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Popper Tutorial</title>
5    <style>
6      #tooltip {
7        background: #333;
8        color: white;
9        font-weight: bold;
10        padding: 4px 8px;
11        font-size: 13px;
12        border-radius: 4px;
13        display: none;
14      }
15
16      #tooltip[data-show] {
17        display: block;
18      }
19
20      #arrow,
21      #arrow::before {
22        position: absolute;
23        width: 8px;
24        height: 8px;
25        background: inherit;
26      }
27
28      #arrow {
29        visibility: hidden;
30      }
31
32      #arrow::before {
33        visibility: visible;
34        content: '';
35        transform: rotate(45deg);
36      }
37
38      #tooltip[data-popper-placement^='top'] > #arrow {
39        bottom: -4px;
40      }
41
42      #tooltip[data-popper-placement^='bottom'] > #arrow {
43        top: -4px;
44      }
45
46      #tooltip[data-popper-placement^='left'] > #arrow {
47        right: -4px;
48      }
49
50      #tooltip[data-popper-placement^='right'] > #arrow {
51        left: -4px;
52      }
53    </style>
54  </head>
55  <body>
56    <button id="button" aria-describedby="tooltip">My button</button>
57    <div id="tooltip" role="tooltip">
58      My tooltip
59      <div id="arrow" data-popper-arrow></div>
60    </div>
61
62    <script src="https://unpkg.com/@popperjs/core@2"></script>
63    <script>
64      const button = document.querySelector('#button');
65      const tooltip = document.querySelector('#tooltip');
66
67      const popperInstance = Popper.createPopper(button, tooltip, {
68        modifiers: [
69          {
70            name: 'offset',
71            options: {
72              offset: [0, 8],
73            },
74          },
75        ],
76      });
77
78      function show() {
79        // Make the tooltip visible
80        tooltip.setAttribute('data-show', '');
81
82        // Enable the event listeners
83        popperInstance.setOptions({
84          modifiers: [{ name: 'eventListeners', enabled: true }],
85        });
86
87        // Update its position
88        popperInstance.update();
89      }
90
91      function hide() {
92        // Hide the tooltip
93        tooltip.removeAttribute('data-show');
94
95        // Disable the event listeners
96        popperInstance.setOptions({
97          modifiers: [{ name: 'eventListeners', enabled: false }],
98        });
99      }
100
101      const showEvents = ['mouseenter', 'focus'];
102      const hideEvents = ['mouseleave', 'blur'];
103
104      showEvents.forEach(event => {
105        button.addEventListener(event, show);
106      });
107
108      hideEvents.forEach(event => {
109        button.addEventListener(event, hide);
110      });
111    </script>
112  </body>
113</html>