Allow tooltip positioning (ex. before, after, above, below) in relation to target element

[DerekJDev]

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

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I need to be able to position the tooltip in different areas around the target element besides below it, but with current documentation it doesn't look like there is a place to specify this setting.

Describe the solution you'd like

A clear and concise description of what you want to happen.

Have an option to specify the position of the tooltip in relation to the target element, maybe add an attribute igxTooltipPosition="below | above | before | after"

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

None other than a different UI framework.

Additional context

Add any other context or screenshots about the feature request here.

[kdinev]

@DiyanDimitrov Does the tooltip currently utilize the same positioning strategy as the overlay?

[DiyanDimitrov]

@kdinev, yes, the tooltip positioning could be changed by modifying the overlaySettings.

[wnvko]

@DerekJDev
Here you can find a sample showing how you can use OverlaySettings in order to position the tooltip.

Note: I know creating an overlay settings is not so straight forward task. This is why we are planning now to implement some factory methods that will create ready to use overlay settings. As soon as we implement these methods we will refer this issue too.

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[wnvko]

@DerekJDev we have implemented the factory methods for creating an OverlaySettings. Here you can find updated sample showing the tooltip by the help of the new factory methods. Now you can use code like this to initialize overlay settings:

    this.afterSettings = IgxOverlayService.createRelativeOverlaySettings(
      this.afterTarget.elementRef.nativeElement,
      RelativePosition.After,
      RelativePositionStrategy.Connected
    );

Keep in mind the Stackblitz sample uses RC version of components.

[PlamenaMiteva]

@DerekJDev Ignite UI for Angular v10.2.0, which includes the new methods for creating OverlaySettings, has been released. You can find more information and a demo about the new functionality here.