Popper-core: Document minimum CSS needed to style arrows

[brianmhunt]

CodePen demo

Steps to reproduce the problem

1. Install Tooltip.js
2. Look for docs on how to add styled arrows

What is the expected behavior?

It would help to have some CSS docs linked from either Tooltip.js, or the README, or somewhere, indicating what minimum styling is needed for tooltips with styled arrows.

What went wrong?

Documentation of this sort does not appear to be available anywhere.

Any other comments?

:beers:

[kmgdevelopment]

Agree. Took me a while to realize you have to manually apply position: absolute as well as top/left/right/bottom alignment for the arrow positioning to work correctly.

[seyfer]

Struggling to add arrow border...

[bfeifke]

Agree. Took me a while to realize you have to manually apply position: absolute as well as top/left/right/bottom alignment for the arrow positioning to work correctly.

@kgrote can you elaborate on what you mean?

[kmgdevelopment]

For me, the expectation upon installation is for the tooltip styling to be applied out of the box. Basically a default style to get up-and-running with the plugin quickly. So when I went through the installation instructions I was confused why I wasn't seeing an arrow, and there's nowhere in the documentation that explains you have to apply your own CSS rules yourself in order for the arrow to display.

So if you're not going to apply default styles, it would be helpful to add some content to the docs that explains you need to add your own, and maybe an example CSS code snippet on how to do that.

[robclancy]

The fact this isn't out of the box was incredible when installing this. I had to grab the styles from the demo site. Such a weird decision... weird enough to even think of it let alone do it.

[kinesias]

The installing process of popper.js is very painful. No css included, very bad documentation with almost no examples. It took me 3 hours to get this plugin running.

[FezVrasta]

I find it awesome this issue has stayed open for 9 months and nobody sent a PR to add this piece of documentation.

[robclancy]

I find it awesome that this issue stayed open for 9 months and you only just comment now. And when you do you play victim.

[FezVrasta]

I added labels to this issue 9 months ago, I don't need to comment, the labels explain everything 👌

[FezVrasta]

Fixed in 8f2469111dcc483623a5fcba99e34c661f9ea74d

[aalimovs]

Anyone looking to have a triangle arrow like in the examples on the site, using the example above, also add:

#pop [x-arrow]::before {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    content: '';
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

And update the negative -10px margins to -5px. Also remove the background-color on #pop [x-arrow].