Tooltip Position

[Stefano Capobianco]

Hi, i've a little question: it's possible that the position enum for the tooltip control  is inversed ?

When i don't set the position the tooltip appears at the bottom center of the target control and not at top center as specified in the documentation.

And the same for the right and left positioning

This is my code:

    <SfTooltip Content="@ContentCollapse" Target="#buttonCollapse" >

        <button id="buttonCollapse" class="btn btn-default">C</button>

    </SfTooltip>

    <SfTooltip Content="@ContentFullscreen" Target="#buttonFullscreen" >

        <button id="buttonFullscreen" class="btn btn-info">FS</button> 

    </SfTooltip>

or

    <SfTooltip Content="@ContentEdit" Target="#btnEdit" CssClass="inlineclass">

        <SfButton ID="btnEdit" @onclick="@OnClickEdit" CssClass="far fa-edit"></SfButton>

    </SfTooltip>

    <SfTooltip Content="@ContentDelete" Target="#btnDelete">

        <SfButton ID="btnDelete" @onclick="@OnClickDelete" CssClass="fas fa-trash-alt"></SfButton>

    </SfTooltip>

Thanks in advance

Stefano

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Stefano, 

 

Greetings from Syncfusion support. 

 

We have looked into your query on Blazor SF Tooltip. On checking your provided code, we found that you have used target property for the Tooltip component. When setting this target property, the Tooltip will positioned bottom center. For resolving this problem, you can remove the target property from Tooltip, by doing so, it will take its inner template element as Target, also Tooltip will position by default as top center.  

 

<div style="margin:500px"> 

 

<SfTooltip Content="Content"> 

    <button id="buttonCollapse" class="btn btn-default">C</button> 

</SfTooltip> 

<SfTooltip Content="Content"> 

    <button id="buttonFullscreen" class="btn btn-info">FS</button> 

</SfTooltip> 

 

    </div> 

 

 

<div style="margin:500px"> 

    <SfTooltip Content="@Content" CssClass="inlineclass"> 

        <SfButton ID="btnEdit" CssClass="far fa-edit"></SfButton> 

    </SfTooltip> 

    <SfTooltip Content="@Content"> 

        <SfButton ID="btnDelete" CssClass="fas fa-trash-alt"></SfButton> 

    </SfTooltip> 

</div> 

 

 

 

@code 

{ 

    object Content = "Lets go green & Save Earth !!"; 

} 

 

Demos: https://blazor.syncfusion.com/demos/tooltip/default  

 

Documentation: https://blazor.syncfusion.com/documentation/tooltip/getting-started/  

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Stefano Capobianco]

Thanks solved

Stefano

[Sowmiya Padmanaban]

Hi Stefano,  

 

We are happy to hear that your issue has been resolved. Please contact us if you need any help from us. We will be happy to help you. 

 

Regards,  

Sowmiya.P