const reference = document.querySelector('.my-button'); const popper = document.querySelector('.my-popper'); const boundary = document.querySelector('.my-boundary'); const arrow = document.querySelector('.my-arrow'); const thePopper = new Popper( reference, popper, ); thePopper.update(); thePopper.scheduleUpdate(); thePopper.destroy(); thePopper.enableEventListeners(); thePopper.disableEventListeners(); Popper.modifiers.forEach(console.log.bind(console)); Popper.placements.forEach(console.log.bind(console)); const thePopperWithOptions = new Popper( reference, popper, { placement: 'bottom', eventsEnabled: true, removeOnDestroy: true, modifiers: { shift: { enabled: true, fn: (data) => data, order: 100, },
positionFixed: true, placement: 'auto-start', eventsEnabled: false, modifiers, removeOnDestroy: true, onCreate(data) { console.log(data); }, onUpdate(data) { console.log('x-out-of-boundaries', data.attributes); console.log('x-placement', data.attributes['x-placement']); data.styles.alignContent = 'flex-start'; } }; Popper.modifiers.map(mod => mod.name); Popper.placements.forEach(placement => placement.toLowerCase()); Popper.Defaults.onCreate = function (data: Data) { }; const popper = new Popper(document.createElement('div'), document.createElement('span')); const popperWithOptions = new Popper(document.createElement('div'), document.createElement('span'), options); popper.options.positionFixed = false; popper.destroy(); popper.update(); popper.scheduleUpdate(); popper.enableEventListeners(); popper.disableEventListeners();