|
|
| (7 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <html> | | <html> |
| <head>
| | <button id="myButton" class="mw-ui-button">{{{1}}}</button> |
| <title>Popper Tutorial</title>
| |
| <style>
| |
| #tooltip {
| |
| background: #333;
| |
| color: white;
| |
| font-weight: bold;
| |
| padding: 4px 8px;
| |
| font-size: 13px;
| |
| border-radius: 4px;
| |
| display: none;
| |
| }
| |
| | |
| #tooltip[data-show] {
| |
| display: block;
| |
| }
| |
| | |
| #arrow,
| |
| #arrow::before {
| |
| position: absolute;
| |
| width: 8px;
| |
| height: 8px;
| |
| background: inherit;
| |
| }
| |
| | |
| #arrow {
| |
| visibility: hidden;
| |
| }
| |
| | |
| #arrow::before {
| |
| visibility: visible;
| |
| content: '';
| |
| transform: rotate(45deg);
| |
| }
| |
| | |
| #tooltip[data-popper-placement^='top'] > #arrow {
| |
| bottom: -4px;
| |
| }
| |
| | |
| #tooltip[data-popper-placement^='bottom'] > #arrow {
| |
| top: -4px;
| |
| }
| |
| | |
| #tooltip[data-popper-placement^='left'] > #arrow {
| |
| right: -4px;
| |
| }
| |
| | |
| #tooltip[data-popper-placement^='right'] > #arrow {
| |
| left: -4px;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <button id="button" aria-describedby="tooltip">My button</button> | |
| <div id="tooltip" role="tooltip">
| |
| My tooltip
| |
| <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: [
| | theme: 'light', |
| {
| |
| 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> |
| </body>
| |
| </html> | | </html> |
| | <templatestyles src="Popper/styles.css" /> |
| | <noinclude>[[Category:Templates]][[Template:Popper/styles.css]]</noinclude> |
