Best way to add picker to page body?

Hi, very cool picker, thank you! Please help - I want to create the picker at the top level of DOM-tree and show/hide it dynamically when the user clicks one of the sub-elements on the page. Can I do it? I want picker to be passive, so it will not listen for clicks, and also I want to position it absolutely, depending on which element was clicked.

I tried to create picker instance on click, then use method ‘show’, and then destroy it onDone.

But currently, the picker tries to add itself as a child of a clickable element, but this absolutely doesn’t work in my case, because the parent element is overflow: hidden and also heavy CSS applied in the area of this element, so picker gets very distorted. (I have an editable tree of properties, and some of these properties are colors)

So, if I will create picker instance with body parent - can I control somehow it’s revealing position?

[YuriGor]

Look ma, auto-positioning! Gist updated. Now popup option, passed into this wrapper function, can be'auto' (by default) or an array of allowed positions ordered by desired priority. 'auto' will be replaced by ['right', 'left', 'bottom', 'top']

Note for @Sphinxxxx - picker doesn’t update popup setting changed via setOptions method, I had to call show method after each setOptions. So you can check inside setOptions if popup was changed then do the same inside.

[YuriGor]

I refactored your example a bit in a more reusable manner: https://gist.github.com/YuriGor/c413b6d5b6e82554b8a37400a8f6580e Maybe you will consider adding something like this function because it’s self-sufficient and requires no changes in the existing code. It’s missing all those cool features I promoted above, but it’s still useful.