Tooltip container takes 100% width

[Brice FROMENTIN]

I encapsulate a SfTextbox of 150px within a tool tip, the container takes 100% width, see the image attached.

<SfTooltip ID="@(ID + "-tooltip")" @ref="@tooltip"

           Target="@("#" + ID)" OpensOn="Hover" OnOpen="OnOpen"

           Width="@Width">

    <SfTextBox ID="@ID" @bind-Value="@CurrentValueAsString"

               Placeholder="@Placeholder" Width="@Width" Readonly="@Readonly" FloatLabelType='@FloatLabelType.Auto' />

    <TooltipTemplates>

        <Content>

            @ValidationTemplate

        </Content>

    </TooltipTemplates>

</SfTooltip>

Regards,

Brice.

Attachment: Tootip_Display_Bug_98569ef6.7z

[Sowmiya Padmanaban]

Hi Brice,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with Tooltip component. From your shared code sample, We have found that you have defined same width for both tooltip and Textbox component. So, Tooltip would have rendered with same width of  textbox.  

 

Cause of the problem in your shared code: (You have used same width variable for both textbox and tooltip) 

 

<SfTooltip ID="@(ID + "-tooltip")" @ref="@tooltip" 

           Target="@("#" + ID)" OpensOn="Hover" OnOpen="OnOpen" 

           Width="@Width"> 

    <SfTextBox ID="@ID" @bind-Value="@CurrentValueAsString" 

               Placeholder="@Placeholder" Width="@Width" Readonly="@Readonly" FloatLabelType='@FloatLabelType.Auto' /> 

    <TooltipTemplates> 

        <Content> 

            @ValidationTemplate 

        </Content> 

    </TooltipTemplates> 

</SfTooltip> 

 

 

To resolve your reported problem, you need to set the different width for Tooltip component. 

 

Refer the below code snippet. 

   <div> 

        <SfTooltip ID="@(ID + "-tooltip")" @ref="@tooltip" 

                   Target="@("#" + ID)" OpensOn="Hover" 

                   Width="@Width"> 

            <SfTextBox ID="@ID" 

                       Placeholder="@Placeholder" Width="@textboxwidth" FloatLabelType='@FloatLabelType.Auto' /> 

            <TooltipTemplates> 

                <Content> 

                    @ValidationTemplate 

                </Content> 

            </TooltipTemplates> 

        </SfTooltip> 

    </div> 

@code { 

    SfTooltip tooltip; 

    public string ID = "textbox"; 

    public string Width = "50px"; 

    public string textboxwidth = "150px"; 

    public string ValidationTemplate = "tooltip"; 

    public string Placeholder = " First Name"; 

    public string CurrentValueAsString { get; set; } = "Syncfusion"; 

} 

 

 

Refer the below screenshot. 

 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/tootip-612345675.zip 

 

If the issue still persist, could you please share the issue reproducing video footage and more details about your reported issue. It will help us to provide you the prompt solution. 

 

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

 

Regards,  

Sowmiya. P 

[Brice FROMENTIN]

Thanks for your answer, I remove Width of the tooltip and the prblem still remain, to workaround it, here is what I did :

@if (!String.IsNullOrWhiteSpace(Width))

{

<style>@("#" + ID + "-tooltip {width:" + Width + ";display: inline-flex;}")</style>

}

<SfTooltip ID="@(ID + "-tooltip")" @ref="@tooltip"

           Target="@("#" + ID)" OpensOn="Click" OnOpen="OnOpen">

    <SfTextBox ID="@ID" @bind-Value="@CurrentValueAsString"

               Placeholder="@Placeholder" Width="100%" Readonly="@Readonly" FloatLabelType='@FloatLabelType.Auto' />

    <TooltipTemplates>

        <Content>

            @ValidationTemplate

        </Content>

    </TooltipTemplates>

</SfTooltip>

The given HTML result :

<style>#nom-tooltip {width:calc(100% - 12px);display: inline-flex;}</style>

<div id="nom-tooltip" class="e-control e-tooltip e-lib">

        <div class="e-input-group e-control-wrapper e-float-input" style="width:100%;">

            <input id="nom" class="e-control e-textbox e-lib" aria-labelledby="label_nom" tabindex="0" type="text" role="textbox" name="nom" value="">

       <span class="e-float-line"></span>

        <label class="e-float-text e-label-bottom" id="label_nom" for="nom">Nom</label>

    </div>

</div>

It seems to me like a dirty hack.

[Sowmiya Padmanaban]

Hi Brice,  

 

As mentioned in last update, removing the width for Tooltip or specifying different width for Tooltip will resolve your problem. Refer the below screenshot. 

 

 

 

On inspecting your shared code snippet, we suspect that you have performed some operations on OnOpen event of Tooltip component, that custom operation might have caused your reported problem. Unfortunately, we were unable to replicate your problem at our end.   

 

Refer the below sample with Tooltip with above suggested solution. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/tootip701041495.zip 

 

If your problem still persist, then please replicate your problem in the above attached sample or share us the code which you have added with OnOpen event. This information would help us to validate your problem and to provide you the prompt solution. 

 

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

 

Regards,  

Sowmiya. P  

[Brice FROMENTIN]

I reproduce my issue by modifying your project.

Attachment: tootip70104149501_51dacfa4.7z

[Sowmiya Padmanaban]

Hi Brice,  

 

We have validated your reported problem with Tooltip component. You can resolve your issue by two ways. 

 

1.     You need to set the width for Tooltip element using HtmlAttributes. Refer the below code snippet. 

 

<SfTooltip ID="@(ID + "-tooltip")" @ref="@tooltip" 

                   Target="@("#" + ID)" OpensOn="Click" HtmlAttributes="@attributes"> 

            <SfTextBox ID="@ID" @bind-Value="@CurrentValueAsString" 

                       Placeholder="@Placeholder" Width="@width" FloatLabelType='@FloatLabelType.Auto' /> 

            <TooltipTemplates> 

                <Content> 

                    @ValidationTemplate 

                </Content> 

            </TooltipTemplates> 

        </SfTooltip> 

private Dictionary<string, object> attributes { get; set; } = new Dictionary<string, object>()  

            { 

               { "class", "custom" },          

            }; 

<style> 

    .custom { 

        width:150px; 

    } 

</style> 

 

2.     Add the display: inline-block to the Tooltip element to resolve this issue. Since its DIV element. So, it inherits the HTML default block behavior. 

 

  <SfTooltip ID="@(ID + "-tooltip")" @ref="@tooltip" 

                   Target="@("#" + ID)" OpensOn="Click"> 

            <SfTextBox ID="@ID" @bind-Value="@CurrentValueAsString" 

                       Placeholder="@Placeholder" Width="@width" FloatLabelType='@FloatLabelType.Auto' /> 

            <TooltipTemplates> 

                <Content> 

                    @ValidationTemplate 

                </Content> 

            </TooltipTemplates> 

        </SfTooltip> 

<style> 

    #textbox-tooltip { 

        padding: 20px; 

        display: inline-block; 

    } 

</style> 

 

Refer the sample link below. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/tootip199499036.zip 

 

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

 

 

Regards,  

Sowmiya.P 

[Brice FROMENTIN]

Thanks for your workarounds, I already done the 2nd one. Any idea about the fix of the issue ?

[Sowmiya Padmanaban]

Hi Brice,  

 

As informed in our earlier update, we render the Tooltip component using div element and it inherits the default HTML display as block CSS style. It is the default behavior of Tooltip component. Your expected solution is not generic and feasible to override the default display style for div element in the component level, so we can’t consider this as an issue to be fixed in our component. 

 

However, you can resolve this problem by using any of the solutions which we shared in our previous update. 

 

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

 

Regards,  

Sowmiya.P