Feature request: Tooltip pointer arrow triangle shape (optional)

[ADTC]

It will be nice if we can configure an arrow on the tooltip.

Currently I'm adding one like this (only works for my specific use case, and it's not general - doesn't have control of sizing and placement except by directly modifying the CSS):

          <Tooltip
            position={Position.TOP_RIGHT}
            content={
              <div style={{ color: 'white' }}>
                ...
                <div
                  // triangle shape
                  style={{
                    position: 'absolute',
                    bottom: '-8px',
                    right: '14px',
                    width: 0,
                    height: 0,
                    borderLeft: '8px solid transparent',
                    borderRight: '8px solid transparent',
                    borderTop: '8px solid #474d66',
                  }}
                />
              </div>
            }>

There are many ways to add tooltip arows: https://www.google.com/search?q=css-tricks+tooltip+arrow

The one I used is here: https://css-tricks.com/snippets/css/css-triangle/

It will be nice if it can simply be enabled using a prop in Evergreen Tooltips instead of having to use a content hack like this.

[brandongregoryscott]

Hey @ADTC,

We don't have any plans at this moment to update the Tooltip design, but you're welcome to compose one on your own as described here.