[Tooltip] Align the tooltip with the implementation in WC

[dkoleva-infra]

Is your feature request related to a problem? Please describe.

The tooltip component is implemented in WC, and it has some new features that currently do not exist in Angular.

Describe the solution you'd like

For the full specification of the new design provided, please check the following link.

Behaviors

• Tooltip should remain open while interacting with it. - Riva

Properties

• showDelay default value should be 200. - Riva
• hideDelay default value should be 300. - Riva
• Arrow design (not default) with option to enable it via property. - Riva
• Sticky mode - Specifies if the tooltip remains visible until the user closes it via the close button (x) or Esc key. - Arkan
  • Change tooltip role from "tooltip" to "status" when in sticky mode.
  • Option to change the default close button (x).

Methods

• IgxTooltipTarget methods showTooltip/hideTooltip should not take showDelay/hideDelay into account. - Riva

Additional

(Investigate possible implementation/improvement)

• showTriggers/hideTriggers - Support for custom triggers that show/hide the tooltip.
• Tooltip positioning - Riva
  • placement (Where to place the floating element relative to the parent anchor element.) - Can be achieved via positionSettings. Postponed - potentially be exposed for global use in PositionSettings.
  • offset (The offset of the tooltip from the anchor in pixels.) - Implemented for global use in PositionSettings.

For Angular tooltip, configuring both is possible by setting overlaySettings: positionStrategy, but it does require a fair amount of code. There might be other approaches as well.

Here is a sample that positions the tooltip 16px above the target.