Powertip Arrows: Add Ability for Borders or Drop-shadow

[speedplane]

Motivation

Take a look at this beautiful tooltip, and especially the tooltip arrow, compliments of Hubspot:

Notice a few things (enlarged below):

• The tooltip arrow has a border of its own
• There is pleasing drop-shadow for the tooltip, and the arrow also has the same drop shadow.

The way powertip is written, it's difficult to implement that design behavior, especially with CSS alone. However, with a suggested change to the code, it can probably be done.

Rotated Square Implementation

The way Hubspot implements tooltip arrows is different than what is suggested in the docs. The docs suggest to use a CSS border property. Whereas Hubspot uses a white square that is rotated:

You have to dig a bit into the implementation, but the white square allows for inner customization of the border and drop-shadow. The border implementation does not.

Another border Implementation

Take a look at this implementation, which also uses the border property, and attempts to get the shadow correct, but fails: https://codepen.io/JackEdwardLyons/pen/YbQWXr

Implementation in Powertip

There are a few ways of implementing the "rotated square" style of arrow (that I'm aware of):

1. Use an inner/wrapper div: http://jsfiddle.net/jeoz1vnm/2/
2. An additional arrow div: https://codepen.io/weaintplastic/pen/YWOQXB

Unfortunately, they all require adding an extra div. Both require changes to top-level structure of the Powertip. So could we potentially

1. Implement an option to wrap all powertips in an extra wrapper div
2. Implement an option to add an arrow div that we could then style
3. Think of another solution that does not require changes to the dom

I've been trying some things in a local checkout, happy to try making a pull request.

[speedplane]

For what it's worth, Salesforce also uses a similar rectangle tooltip arrow: