floating-ui / floating-ui Goto Github PK

use grunt gh-pages to automatically publish new docs

CodePen demo

https://codepen.io/FezVrasta/pen/QEJGvJ

What is the expected behavior?

The popper should be properly positioned.

What went wrong?

It's not positioned correctly.

Any other comments?

Not an high priority problem, but still nice to have.

This will allow us to keep the size of the core library small (and keep the library focused on the positioning stuff) while making it possible to create a side-library that will make easier the usage of Popper.js.

The side-library should work like the tooltip plugin of Bootstrap, so it will automatically create the tooltip, will manage the state of it (open/close) and so on.

Any suggestions about features that could be added to this Poppit.js are more than welcome, included a better name 😜

Breaking changes

This feature will introduce breaking changes, so far the one that comes to my mind will be the missing of the parse option in the core Popper.js library.

To do:

• Remove parse modifier from Popper.js
• Create the skeleton of the new side-library
• [Feature] Create tooltip like it happened with the parse modifer
• [Feature] Open tooltip on reference hover
• [Feature] Close tooltip on mouse leave of reference element
• [Feature] Open tooltip on click of reference element

Linked to #25 I think

Really like the project, was initially going to integrate Tether+Drop into the new JSFiddle rewrite but eventually decided on using Popper.

You mention "modifiers" a lot on the page, docs and in issues, any chance for a intro to writing modifiers?

Hey there,

at first, popper.js is really nice and I try to use it instead of tether.io owing to performance problems.
It works quite well, but there is a problem when resizing the viewport, which I tried to understand and solve for some hours now.

The problem is as follows. Open the popover and now resize the browser width. At a specific point, the popover moves to the right. This leads to a positioning problem in some viewports, where the popover is fully shown, but the positioning is wrong. I would expect, that the popover pins to the right side of the viewport when resizing.

For a better understanding, here's the Codepen.

Thanks for your suggestions and hope we find a solution together.

Kind regards,
Falingorn

When I have 'removeOnDestroy' options added for a popper I get

TypeError: Object doesn't support property or method 'remove'

in IE.

// remove the popper if user explicity asked for the deletion on destroy
        if (this._options.removeOnDestroy) {
            this._popper.remove();
        }

I had to apply the polyfill suggested in https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove to make it work.

Please fix or mention this polyfill in documentation.

Steps to reproduce the problem

1. Go to https://popper.js.org/
2. Scroll page to section POPPER ON YOUR SIDE!
3. Wait popper elements on the left side toggle
4. When a new popper appears, scroll the page a bit

the change is more notable when it is the left popper that is visible

What is the expected behavior?

Popper element stays on the same position

What went wrong?

Popper element reposition itself due to changes in getComputedStyle result

Any other comments?

Check this gif:

Right now we are using JSDoc but it doesn't seem to be maintained anymore.

jsdoc/jsdoc#1239

The current documentation isn't the nicest so if someone has some good name to suggest which could improve our documentation please share with us.

Alternatives

• jsdoc2md

Hi, I'm having a problem that the popper will have a 5 pixel offset horizontally if its parent DOM element and the parent of that element are relatively positioned.

Demo

CodePen: http://codepen.io/leopoldthecoder/pen/Nrdarb
jsfiddle: https://jsfiddle.net/n7sznqvx/

The two demos above are the same, so check either one you want.

Steps to reproduce the problem

1. the popper must have a parent element and a grandparent element
2. the parent and grandparent must have position: relative

What is the expected behavior?

I assigned the placement to bottom-start when creating the popper so I expect the left border of the popper to align with the left border of the reference(in this case, the button element)

What went wrong?

It worked fine until I relatively positioned its two ancestors. In fact, removing position: relative on either one of its two ancestors fixes the problem. But now the popper has left: 5px which I expect left: 0.

Any other comments?

In the demo I turned off gpuAcceleration. If gpuAcceleration is on, the popper will have transform: translate3d(5px, -26px, 0px) which I expect transform: translate3d(0px, -26px, 0px).

Could you tell me why this happens? Thank you.

Hey there,

I'm trying to reproduce a pretty common situation: a popper inside an element with position:fixed, the popper goes outside of the parent's boundaries. It's a typical case for a popper inside a modal dialog for example.

And I can't make it work... The popper element doesn't positioning itself in the right place, and it doesn't move when I scroll the parent element.

CodePen demo

http://codepen.io/nadiam84/pen/YWZmPv

What is the expected behavior?

Expect it to be positioned relative to the target element. And move with it on scroll event.

Could you possible take a look?

I'm talking about rate limiting this code:

// NOTE: 1 DOM access here
        this.state.updateBound = this.update.bind(this);
        root.addEventListener('resize', this.state.updateBound);

        // NOTE: 1 DOM access here
        this.state.updateBound = this.update.bind(this);
        root.addEventListener('resize', this.state.updateBound);

As it can be a simpler and more effective solution for #17

To do that please see some inspiration here:

http://ejohn.org/blog/learning-from-twitter/

Anyway that's a debouncing and not throttling, you don't want it as it will prevent any smooth animation during user interactions

Credits: http://benalman.com/projects/jquery-throttle-debounce-plugin/

What you want instead is 'throttling with trailing edge' to get ensured the invokation of the update at the end of scrolling or resizing user interaction but keeping a smooth (but not resource hungry if limited in fps) visual updating during the user interaction

Credits: http://benalman.com/projects/jquery-throttle-debounce-plugin/

To achieve that you can use requestAnimation frame too, see for inspiration

https://gist.github.com/paulmillr/3118943

but that solution needs to be improved with a 'scrollend' (throttling trailing end) invokation ensurement - e.g. a debouncer too? )

What I suggest instead is to not use requestAnimation frame at all, as it's actually not intended for 'user input initiated' repaints but for 'javascript initiated' repaints, but use a nice throttling like the underscore.js one:

http://www.tivix.com/blog/using-underscorejs-for-easy-performance-wins/

but of course not with 'immediate' with 'trailing edge' option:

var maxFps = this._options.maxFPS; 
var minWaitMillis  = 1000/maxFps; //eg. 16 if 60fps
var throttledUpdateBound = this._.throttle(this.state.updateBound,minWaitMillis,{leading:true,trailing: true});
root.addEventListener('resize', throttledUpdateBound );
root.addEventListener('scroll', throttledUpdateBound );

Codepen test case

Scenario:
I'm fabricating content then want to pop it up. It appears since this content is not attached to the document that popper fails with:

VM2242 popper.js:1017 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
....
Popper._getBoundaries   @   VM2242 popper.js:481
Popper.update   @   VM2242 popper.js:216
Popper  @   VM2242 popper.js:175

1. Is this a bug?
2. If not, what is the recommended way to pop dynamic content?

This is a trivial issue but I'd rather not duplicate any default config externally.

Using Object.assign makes use of the defaults for arrow impossible if you want to customize.

Codepen test case

I don't think it is a big piece of code to add, I have used node-extend for this and it works well (and you don't need to add jquery)

Would love to have the ability to set a specific tooltip to be "sticky" so that the user needs to click on either a (X) or clicking outside of the tooltip area. Being able to choose one or both options would be great as well.

Do not see any negative impact, but the attribute is here is value set to undefined

Got 3 questions:

• Is any way to actually show them only on hover?
• Is there a way to add animations when adding a popper (for example I need to trigger a popper on a error so that the user knows what he inputed was bad)
• Any examples with how a popper can be deleted? :)

Scenario
Material design date/time picker

Idea
Allow responsive configuration so that when size dips below a threshold such as a mobile (e.g. md from bootstrap nomenclature), or switching from ipad landscape to portrait (example drawer does something similar), turn the popper into a modal with overlay.

Seems like you'd want most of the same functionality to manage something like Bootstrap's dropdown menu. Any reason not to use Popper for this? I like the idea of having one lib to manage my "boxes that need to appear positioned somehow relative to other boxes" needs.

It seems that popper doesn't work well when the trigger is a fixed element.

It would be cool to be able to align the popper along one of the corner of the trigger (top-left, top-right, bottom-left, bottom-right).
This is an example case :

The trigger is the arrow.

What?

First of all I know this lib is only managing tooltip positioning. Not how user open/close or toggle it.
What I'm trying is to wrap a PopperJS instance inside a boostrap tooltip like jQuery plugin. This way I can handle user clicks and open/close tooltips.

What I'm doing

I'm creating PopperJS instance the first time user clicks on the reference.

show: function() {
  ....
  if (!this.popper_instance) {
      this.popper_instance = new PopperJS(
        this.$element,
        popperObject,
        {
          ...POPPER_DEFAULT_OPTIONS,
          ...popperOptions,
          modifiers: this.getModifiers(),
        },
      );

      this.$tip = $(this.popper_instance._popper);
  }

  this.$tip
    .detach()
    .appendTo('body');
  ...
}

But initiating a Popper instance requires get offsetHeight witch makes a lot of layouts reflows.

Insert in the body

Something important that I'm doing is inserting the tooltip in body page. Is that ok?

Does somebody a good example of how connect popper into a jquery plugin?

DOM size

Another thing is that my page has a lot DOM nodes

https://github.com/FezVrasta/popper.js/blob/master/src/popper.js#L190

The destroy method doesn't actually destroy the popper, it just removes the styles, the element is left in the DOM and visible.

Codepen test case

I feel foolish like I'm missing something essential.

Codepen test case

<span class="myReference">Hello</span>

var reference = document.querySelector('.myReference');
new Popper(reference, {content: 'World'}, {placement: 'right'})

I have an application with a drawer with position: fixed and is pushed in and out of the interface using transforms. I've found that placing a Popper within that drawer causes the position of that Popper to be way outside of the viewport. It seems that this is caused by the transform on the parent drawer because the transform origin is no longer relative to document.body but the drawer element.

Here's a CodePen illustrating the issue. Uncomment the transform: translateX(0) line in the CSS to see what I mean. I'm going to try and work up a solution on my end, but since I don't know your code very well I wanted to put it up here so you might find a better way than me to fix it.

I'm not able to find any hooks from the attached popper's element.
For example it would be cool to set an onHover behavior at the instanciation.
Isn't it possible?
Is there the place for write one of what you call modifier?

Well I think everything is in the title :p

When using {parent: document.querySelector('form')}, Popper.js display a warning about having an array of Nodes instead of just one (which is truly just one) because a form element has a length key in it's object, making Popper believe it's an array.

It may be better to check for an existing element from a dom (like parentElement) to know if it's an array or not ?

I notice that when the dom is ready, the popper is not placed at the trigger position but at the top left of the window.

Here is a codepen to show the issue : http://codepen.io/Webarkitekt/pen/Yqegjw

The element is only moved at trigger position after page scroll.

Scenario: datepicker

I need to know if the state of the popper, and perhaps gather data from it when hidden and before being destroyed. I could track showing myself, but it would be nice to have. These could be callbacks or events, either way.

Ideally, I think these would be good additions:

• onHidden
• onShow
• onDestroy

isShowing is nice to have but with the above, I could easily track this myself.

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

I just update to v0.3.7 and I started to get some errors because in the line 237 of the file src/popper.js the variable this._trigger is used, this variable was removed in v0.3.4.

The code here is ok, just this file in the NPM package has this problem, the files in the build folder are ok too.

I tried deleting the node_modules folder and installing again, but it's seems that the problem is realy in the NPM package.

Hi.
I try to create tooltip. But I dont understand how to add show/hide toggle functionality by click event.
http://codepen.io/codev0/pen/XKbeXR

<div class="elem" data-popper="false">  
  ...
</div>

content = ['string1', 'string2', 'string3'];

$('.elem').on('click', function(e) {

  if (!$(e.target).data('popper')) {
    $(e.target).data('popper', true);
    var thePopper = new Popper(e.target, {
      classNames: ['popper'],
      content: content,
      parent: toolTip,
      contentType: 'html',
      placement: 'bottom-start',
      reference: e.target
    });
  } else {
    $(e.target).data('popper', false);
    thePopper.destroy();
  }
});

Hi @FezVrasta. Thanks for this great package!

I haven't yet looked at it too much but I'd be very interested to learn how this could (and should?) be used together with ReactJS. I think this might also be very interesting for others and therefore worthy to be added to the Readme?

Looking forward to hear your thoughts!

CodePen demo

http://codepen.io/claudiobmgrtnr/pen/grBrmV

Steps to reproduce the problem

NOTE: The bug will only appear in IE10 or IE11. Edge works fine.

1. Open any popper whose boundary element is "viewport"
2. Apply "overflow-y: auto" to the body
3. Scroll until the popper should flip to prevent itself exiting the viewport

What is the expected behavior?

The popper should flip to the correct position following the order of the desired flip behavior.

What went wrong?

The popper exits the viewport. There seems to be a problem in IE where scrolltop of the body will always be 0 if its "overflow-y" css property is set to "auto". This causes wrong calculation results of the boundaries. Removing the overflow-y property should fix it.

Any other comments?

I didn't test it in IE9

What is the expected behavior?

I would expect popper to disappear when element is not visible

Demo

To reproduce this you just need to change height on .example2__scroll-box from 200% to 10000px

Solution

I'll try to do something with a custom modifier. But I think this should be fixed in the core.

Tried to follow the documentation with onCreate onUpdate but it cannot be chained. onCreate return undefined

Could you create polymer element?

• https://www.polymer-project.org/1.0/docs/start/reusableelements.html
• https://elements.polymer-project.org/elements/paper-tooltip
• https://customelements.io/

It will be nice if popper has Tooltipster-like inline element support. See here.

Right now we use plain JavaScript, but with Rollup we'll be able to use ES2015 features and make the library more modular and easier to maintain.

There was an comment on HN about examples looking like images

Perhaps I'm an idiot, but it wasn't immediately clear to me that the examples were actually examples. They looked like images...

When I first looked at the examples I thought so too but it wasn't quite obvious to me why. After looking at the examples again, it wasn't due to missing scrollbars or anything, it was the blurriness of the text for me, which made the poppers look like low quality JPEGs

Chrome on the left, Firefox on the right:

As you can see the Chrome one is extremely blurry. There are some[1] workarounds workarounds[2] to combat this, but quickly going through them with Devtools didn't bring much results. Most likely they are something that need to be applied every time translate3d is applied.

Use with jquery elements break:
this.popper = new Popper(this.dp.$element, this.$picker, this.config.popper)

Error:
popper.js:1017 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

It had to be:
this.popper = new Popper(this.dp.$element[0], this.$picker[0], this.config.popper)

Perhaps for convenience these should be checked and converted in the constructor of Popper?

i.e.

if(reference.jquery){
  reference = reference[0]
}

Hello,

I just update from 0.3.1 to 0.3.5, and i loose all my arrows.

You seems to have change the configuration from popper.arrow.tagName to popper.arrowTagName and so on but forget to change the parsing of the configuration, or am i missing something ?

Line 288

if (config.arrow) {
        var arrow = d.createElement(config.arrow.tagName);
        addClassNames(arrow, config.arrow.classNames);
        addAttributes(arrow, config.arrow.attributes);
        popper.appendChild(arrow);
}

Hi, just a question. In documentation you talk about placement option being bottom-left. But for me is working bottom-start.

Steps to reproduce the problem

Go to documentation: https://popper.js.org/documentation.html#new_Popper

What is the expected behavior?

Acurate placement documentation

Describe what you would have expected.
I would expect bottom-start, bottom-end,... in the doc.

What went wrong?

I see

Any other comments?

Is that ok?

Hi, I'm trying to use Popper.js with my angular project and I receive the error : "Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. "

Here is my code

var test1 = document.getElementById("test");
var test2 = angular.element("#test");
var test3 = angular.element(document.querySelector('test'));
var test4 = $document.find('#prize__title');

var thePopper = new Popper(test4,
    {
        content: 'My awesome popper!'
    },
    {
        // popper options here
    }
  );

Thank you very much!

Hey :)

When animating elements using the CSS property transform: translate(), and once the animation is done, trying to show the tooltip cause the calculation of the position of the tooltip to be (way) wrong.

Here's a fiddle to show the issue : https://jsfiddle.net/wtb6rzo5/

It's worse when placing it on "top" (try, it won't show the tooltip because it's placed behind the "javascript" code part of jsfiddle).

I'll try to see if I find the reason, but maybe you'll be faster than me!

Hello,
I just ran the Popper site in IE9 on Win7 (through VirtualBox) and saw that it was not quite working as expected. What is the official browser support for Popper?

Example: https://www.dropbox.com/s/eq3acgq7prtty51/Screenshot%202016-05-04%2005.53.57.png?dl=0

Demo with my issue: https://jsfiddle.net/0kL5r8t2/

Basically on my site i have fullscreen chat with position fixed and inside is scrollable area with chat messages. The problem is what you can see in the demo. Tooltip is not sticket to the reference element, but is positioned somewhere outside document body. Position fixed seems to be key issue here, without it tooltips are are positioned correctly. Am I missing some option in Popper initialization? i would appreciate help, tips, how to fix this thing :) Thanks.

Hello,

I'm having an issue with Popper inside a scrollable parent. It behaves weird. Could you maybe take a look?

CodePen demo

https://codepen.io/nadiam84/pen/LkQdLW

Another one with flex alignments and all positions (just in case)
http://codepen.io/nadiam84/pen/GqQbor

To make it more fun, Popper behaves perfectly inside a scrollable parent which is inside a parent with position 'fixed'.
http://codepen.io/nadiam84/pen/rLJEWg

Steps to reproduce the problem

Just scroll vertically

I went through the code and the arrow auto-insert it's intentionally omitted in anything else than parse mode.

Curious what the reasoning behind this? Are you guys open to PR so that arrow is also added when using an element reference as the popper?

Improve the placement to support an auto mode which will calculate the available space on the 4 directions and will then put the popper on the direction with more space.

How can this idea be improved?