|
|
| Line 1: |
Line 1: |
| <html> | | <html> |
| <button id="button" aria-describedby="tooltip">{{{1}}}</button> | | <button id="myButton">{{{1}}}</button> |
| <div id="tooltip" role="tooltip">
| | |
| {{{2}}}
| |
| <div id="arrow" data-popper-arrow></div>
| |
| </div>
| |
| <script src="https://unpkg.com/@popperjs/core@2"></script> | | <script src="https://unpkg.com/@popperjs/core@2"></script> |
| | <script src="https://unpkg.com/tippy.js@6"></script> |
| <script> | | <script> |
| const button = document.querySelector('#button'); | | // With the above scripts loaded, you can call `tippy()` with a CSS |
| const tooltip = document.querySelector('#tooltip');
| | // selector and a `content` prop: |
| | | tippy('#myButton', { |
| const popperInstance = Popper.createPopper(button, tooltip, {
| | content: '{{{2}}}', |
| modifiers: [
| |
| {
| |
| name: 'offset',
| |
| options: {
| |
| offset: [0, 8],
| |
| },
| |
| },
| |
| ],
| |
| });
| |
| | |
| function show() {
| |
| // Make the tooltip visible
| |
| tooltip.setAttribute('data-show', '');
| |
| | |
| // Enable the event listeners
| |
| popperInstance.setOptions((options) => ({
| |
| ...options,
| |
| modifiers: [
| |
| ...options.modifiers,
| |
| { name: 'eventListeners', enabled: true },
| |
| ],
| |
| }));
| |
| | |
| // Update its position
| |
| popperInstance.update();
| |
| }
| |
| | |
| function hide() {
| |
| // Hide the tooltip | |
| tooltip.removeAttribute('data-show');
| |
| | |
| // Disable the event listeners
| |
| popperInstance.setOptions((options) => ({
| |
| ...options,
| |
| modifiers: [
| |
| ...options.modifiers,
| |
| { name: 'eventListeners', enabled: false },
| |
| ],
| |
| }));
| |
| }
| |
| | |
| const showEvents = ['mouseenter', 'focus'];
| |
| const hideEvents = ['mouseleave', 'blur'];
| |
| | |
| showEvents.forEach((event) => {
| |
| button.addEventListener(event, show);
| |
| });
| |
| | |
| hideEvents.forEach((event) => {
| |
| button.addEventListener(event, hide);
| |
| }); | | }); |
| </script> | | </script> |
