Tooltip React Component #50
Description
Requirements:
- Should match the style shown in specks
- The tooltip should be flexible and detect the position of the target relative to the viewport edge. By default the preferred orientation of the tooltip is above the target, centered. If this is not possible, the tooltip should try to stay above the target and the tooltip pointer should align with the center of the target. It should follow top, right, bottom, left as order of precedence when it is not possible to render it at particular placement, move to the next.
- Tooltips should be at least 10px (should be configurable) from the viewport edge. The tooltip pointer should be 5px (should be configurable) from the target.
- Use a css-only solution for the tooltip pointer: square that is rotated 45º and aligns with the background. This way you can position it centered to the target, and use drop-shadow if needed for the whole thing.
- Should allow any content (e.g. any other React component) inside the tooltip
- Tooltip trigger should be configurable. For now, we need click and hover as two possible triggers
- Delay (in milliseconds) in rendering the tooltip, on the configured trigger, should also be configurable
- Should support themes. For now we would have only single theme, default.
- Should support adding custom css class to the root container of the tooltip