Tooltip

[LHinson]

The tooltip component requires the following:
CSS to address update visuals and address technical comments seen on current open PR

[sjcox-rh]

Visuals for tooltip.

Two variations shown - on hover and on click.

Please keep in mind to various placements of tooltips when implementing - on right, on left, on top, on bottom.

Please review!

[christianvogt]

PopperJS is a very powerful placement library for popovers. It is used to position both the popover box and the arrow. The only stipulation when used for inclusion of arrow placement is that the arrow must be a separate HTML tag and not some pseudo element.

For example:

<div class="pf-c-tooltip">
    <div class="pf-c-tooltip__arrow"></div>
    <div class="pf-c-tooltip__content">Tooltip content here.</div>
</div>

[sjcox-rh]

Update to visuals:

Separating out tooltip and popover to two separate components.

Please keep in mind to various placements of tooltips when implementing - on right, on left, on top, on bottom.

[trahman73]

For implementation into Ansible Tower, we feel that 32px padding is very large in relationship to the icon that will trigger the tooltip itself. We also feel the the white background of the tooltips do not provide any contrast against the application even with a drop shadow.

Example of size and background issue:

We are proposing a 16px padding tooltip with a dark background (exact color to be suggested by design team) and no drop shadow (shown below). We can offer the choice of dark vs light background as a variable if necessary.

Slack Tooltip Example:

Github Tooltip Example:

[LHinson]

@trahman73 This issue will be closed out with the current tooltip PR therefore I'm separating this out as its own issue so we can continue to follow up on it. See #474

[LHinson]

This has been merged so I'm closing this issue.