Popper.js v1 API migration instructions

[Federico Zivolo]

Popper.js v1 introduces several breaking changes in its API, these changes are needed to make the API easier to use and the library more powerful and versatile.

Migration instructions

Modifiers definition

To add a custom modifier, define inside the modifiers option object, an object containing the properties order, enabled and function.

• each object must be assigned to a property with the name of the modifier, this name will be used internally to identify and refer this modifier

• order: order of execution of the modifier, the default modifiers configuration is defined here:
  https://github.com/FezVrasta/popper.js/blob/master/src/popper/modifiers/index.js#L30-L95

• enabled: true to enable it, false to disable it

• function: the function that describes your custom modifier (the modifiers API is unaltered)

• onLoad: function executed when Popper.js instance is created, useful to execute custom code at startup time.

Heads up! modifiersIgnored is deprecated, use enabled: false if you want to disable a specific modifier.

Configurations

The configurations related to a modifier have been moved inside their modifiers configurations.

• options.preventOverflowOrder is now options.modifiers.preventOverflow.priority
• options.arrowElement is now options.modifiers.arrow.element
• options.offset is now options.modifiers.offset.offset
• options.flipBehavior is now options.modifiers.flip.behavior
• options.boundariesElement is now options.modifiers.flip.boundariesElement and options.modifiers.preventOverflow.boundariesElement. In this way you can have two different behaviors for the two modifiers.
• options.gpuAcceleration is now options.modifiers.applyStyle.gpuAcceleration

Callbacks

The chained interface used in v0 was flawed, we replaced it with a single-command interface where everything is defined in the constructor options.

// old interface:
new Popper(reference, popper, options).onCreate((data) => {}).onUpdate((data) => {});

has been replaced with:

// new interface:
new Popper(reference, popper, {
  ...options,
  onCreate: (data) => {},
  onUpdate: (data) => {},
});

Auto popper creation

In v0 there was a feature that allowed you to pass an object as second parameter of Popper to let it automatically create the DOM element used as Popper. This feature has been removed because it was out of scope in the core.
We replaced it with a new side library called Tooltip.js (you can find info about it in the README and at popper.js.org).
If you still need to use the feature, please take a look to this gist where you'll find a custom modifier that reintroduces the exact same feature with the same API. It includes a CodePen example!

https://gist.github.com/FezVrasta/075d228ffb855688c75a69c6d1d6afce

[Vijay Sekhar Sadineni]

I have a doubt ? regarding Tooltip.js. Options.Trigger takes only one item but in my case I need hover and focus both. how can I achieve that.

[Federico Zivolo]

you can put multiple values space separated

[Vijay Sekhar Sadineni]

Thank you. It works.

[tang-love-1314]

how to get js ？