hint dialog do not stack with bottom position

Flyer53 / jsPanel4

A JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers/alerts or contextmenus for use in backend solutions and other web applications.

https://jspanel.de/

Other

317 stars 57 forks source link

hint dialog do not stack with bottom position #164

Closed attyskater closed 3 years ago

attyskater commented 3 years ago

When using bottom placement and showing multiple hints they are not stacked correctly, they overlap. You can find an example here.

The other strange thing I don't understand is why on jsfiddle if animations are present the close button doesn't work. As you can see here, the first and last one close correctly but not the middle one.

Flyer53 commented 3 years ago

Hi there, Your code in the fiddle has several issues:

when you position the hints right-bottom the autoposition parameter of option.position should be up, not down
when you position the hints right-bottom the positioning offsets - if used - should most probably have negativ values in order to move the hints a bit up and left
your example uses CSS animations from animate.css, but you don't load the CSS file. And that's most probably the reason for the disabled close button as well

Here is a working fiddle

attyskater commented 3 years ago

Thanks for the help! Yes you're right, I completely forgot about the animate.css file while trying to reproduce the problem. Ok, with the setTimeout everything works correctly, but without it no. The hints are positioned in a strange way, if instead of right-bottom you put center-top everything works. Probably it's me that haven't understood how they work yet...

Flyer53 commented 3 years ago

Hi again, No, it's not you making an error. The problem is probably the use of animations. Each additional hint tries to position relative to the previous hint. But in your example the previous panel is still in transition due to the used animation (and the animation in the example takes some time to reach the final position). So the next panel doesn't get proper position values to work with. If you, for example, use simple fadeIn and fadeOut animations everything works fine.

Bottom line: Not all the possible animations go well with jsPanel hints. Especially when a hints position is not reached when the next hint appears. And yes ... I should add a note on this in the docs ...

attyskater commented 3 years ago

Hi, Thank you so much for your thorough explanation! I imagined it was a transition issue between placements, however, I hadn't thought about changing the animation.

Yes, maybe an additional note on the documentation would be helpful to everyone. Thanks! see if you can close the report ;)

Flyer53 commented 3 years ago

My pleasure, I added a note to the hint docs ...