Popper-core: Improve arrow modifier docs

Created on 26 Dec 2017  Â·  9Comments  Â·  Source: popperjs/popper-core

CodePen demo

https://codepen.io/anon/pen/BJpmjz

Steps to reproduce the problem

  1. arrowElement set to div where I will place the arrow
  2. Print value of data.arrowElement in onUpdate callback

What is the expected behavior?

Arrow div is printed to the console and placed between the reference and popper div.

What went wrong?

The arrow div is not positioned and not returned in the callback as if it's ignored. This results in the value undefined being printed to the console.

Any other comments?

I couldn't really find documentation nor examples of including an arrow with the popper on the internet at all, so specifying it as arrowElement in the Popper constructor is a guess, but I hoped it would work. What is the correct solution?

# ENHANCEMENT ✨ low Fixed in v2 medium docs

Most helpful comment

@Overv It's always a trade between flexibility and presets.. not generating any markup give's you all the options to use whatever markup for your popover.

The needed markup is very simple:
````

Your content

````

All 9 comments

arrow element must be child of its popper element.

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

I'll try to make the docs clearer

Hi @FezVrasta,
Regarding the arrow documentation, when setting the modifier

arrow: {
    enabled: false,
},

Is that supposed to hide my arrow markup? Is it correct, that I need to add the arrow markup myself?

Popper.js doesn't create any markup. You need to add it manually.

ok..but what should happen then when I set the modifier arrow.enabled.false, should it hide the arrow markup?

@FezVrasta Why is there no default markup that at least makes it look like on the demo website?

@Overv It's always a trade between flexibility and presets.. not generating any markup give's you all the options to use whatever markup for your popover.

The needed markup is very simple:
````

Your content

````

If the modifier is disabled and the arrow markup is present. It will not be touched so it will not get the proper pisition.

@Overv you can use Tooltip.js if you need an higher level abstraction

Is there any progress? I am not able to get the arrows working as i want.

This is just a documentation ticket, there's nothing broken with the library.

Was this page helpful?
0 / 5 - 0 ratings