How to set multiple positions ... ?

[Michael Griffiin]

Doesn't Work
    <ejs-tooltip #tool openDelay="270" position="RightCenter,LeftCenter">

Doesn't Work

    <ejs-tooltip #tool openDelay="270" position="RightCenter | LeftCenter">

Doesn't Work

    <ejs-tooltip #tool openDelay="270" position="'RightCenter' | 'LeftCenter'">

Yet your code does this ???

export declare type Position = 'TopLeft' | 'TopCenter' | 'TopRight' | 'BottomLeft' | 'BottomCenter' | 'BottomRight' | 'LeftTop' | 'LeftCenter' | 'LeftBottom' | 'RightTop' | 'RightCenter' | 'RightBottom';

[Shalini Maragathavel]

Hi Michael, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you need to dynamically change the position of the Tooltip. You can achieve your requirement by setting the required position value in the position property of Tooltip as demonstrated in the below code snippet,   

  

 

        <ejs-tooltip #tooltip content='Lets go green & Save Earth !!!' style="display:block;position:absolute;left:calc( 50% - 60px);top:45%;"> 

            <button ejs-button>Show Tooltip</button> 

        </ejs-tooltip> 

     

    <select id="positions" (change)="onChange($event.target.value)" class="form-control"> 

                                     . . . 

        </select> 

                             

------------------------------------------------------------------------- 

export class AppComponent { 

    //Handle tooltip position based on drop-down value change 

    onChange(value: string) { 

        this.control.position = value as Position; 

    } 

} 

 

In the below sample, we have dynamically modified the Tooltip position based on the dropdown value for your reference. 

Sample: https://stackblitz.com/edit/dynamic-tooltip-position?file=app.component.ts 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/tooltip/default 

API Link: https://ej2.syncfusion.com/angular/documentation/api/tooltip#position 

Please let us know if you need any further assistance. 

Regards, 

Shalini M. 

[Michael Griffiin]

Yep, but again, you don't set the position to multiples, I have seen the demo's and the documentation. I guess you are telling me that "position" can only be one value, not both LeftCenter and RightCenter whichever is more appropriate given the space around it. Is that correct?

[Shalini Maragathavel]

Hi Michael, 

Good day to you. 

We checked your query and would like to let you know that the Tooltip does not support multiple combination of values for position property. In Tooltip component, we have a windowCollision property to handle Tooltip position when the Tooltip is not positioned properly based on the target.  

Please find the below documentation for more information on Tooltip component. 

Documentation: https://ej2.syncfusion.com/angular/documentation/tooltip/position/ 

Please get back to us if you need any further assistance.

Regards,
Shalini M.