search

floating-ui / popper.js.org

🍿🦉Website and Documentation for Popper and friends
https://popper.js.org
MIT License
77 stars 400 forks source link

Arrows gets twice position:absolute #44

Open dilyanpalauzov opened 2 years ago

dilyanpalauzov commented 2 years ago

https://popper.js.org/docs/v2/tutorial/#arrow suggests this call:

<div id="tooltip" role="tooltip">
  My tooltip
  <div id="arrow" data-popper-arrow></div>
</div>

and

#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

As far as I can see, the arrow modified assigns the element with id="arrow" to state.elements.arrow. The appyStyles modifier sets state.elements.arrow.style.position='absolute'.

This means, that by following the tutorial the position style for the arrow-element is set twice to absolute: once using CSS and once by Javascript.

Please adjust either the tutorial, not to recommend setting explictly #arrow, #arrow::before { position: absolute }, or the arrow/applyStyle modifiers not to set for the arrow-element position: absolute.

E.g. the example shall set position: absolute for #arrow::before, but not for #arrow itself.

Moved from https://github.com/floating-ui/floating-ui/issues/1528.

hardiksharma11 commented 1 year ago

Hiii there ..... Is this issue resolved? If not I would be greatful to do it