We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Wrapping a SfToolTip around an SfDropDownList doesn't show the tool tip


<SfTooltip ID="@Id" Target="#dropdowntip" Content="@DropDownListToolTipText" CloseDelay="100" OpensOn="Hover">
    <SfDropDownList ID="dropdowntip" Placeholder="@Placeholder" FloatLabelType="FloatLabelType.Auto" @bind-Value="@Value" DataSource="@DataSource">
    </SfDropDownList>
</SfTooltip>

When the same code is wrapped around an SfTextBox then the ToolTip shows correctly. On an SfListBox it doesn't appear.


6 Replies

SH Sheldon March 22, 2023 09:26 AM UTC

It's not perfect since it doesn't match the other tooltips but I found in your docs to use HtmlAttributes keyword and set title equal to the tooltip string.

Is there anyway to customize this html tooltip to match the default SfToolTip?



LD LeoLavanya Dhanaraj Syncfusion Team March 23, 2023 04:30 PM UTC

Hi Sheldon,


Greetings from Syncfusion support.


Based on your requirements, we have prepared and validated the mentioned issue (Tooltip as a wrapper element for the DropDown List and List Box) in the Tooltip component. However, we were unable to replicate the issue on our end. We suspect that the issue occurs due to improper Tooltip targeting in your application. To resolve the issue, you need to properly map the Tooltip Target for the components.


For your reference, we have included a sample of the DropDown List and ListBox with the Tooltip as a wrapper element. Please check the sample and let us know if you require further assistance.


Regards,

Leo Lavanya Dhanaraj


Attachment: TootipAsWrapper_5884861c.zip


SH Sheldon March 23, 2023 05:27 PM UTC

Your example is giving a tool tip for each item in the list and it isn't a DropDownList. I just want one tooltip when the SfDropDownList is hovered over. 



LD LeoLavanya Dhanaraj Syncfusion Team March 27, 2023 11:41 AM UTC

Hi Sheldon,


Based on the shared details, we understand that you would like to display the Tooltip for the Dropdown List component rather than its list items. Our Tooltip component is displayed based on its Target property. Therefore, you can link the Tooltip to the relevant elements by specifying its corresponding class name in the Tooltip Target property. Based on your requirement, we have included the modified sample.


Check out the below code snippets for further assistance.


<SfTooltip ID="Tooltip" Target=".e-ddl" Content="DropDownList" >

    <SfDropDownList TValue="string" TItem="Games" Width="600px" Placeholder="Select a game" DataSource="@LocalData">

        <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>

    </SfDropDownList>

</SfTooltip>


Attachment: SfTooltip_adc1e186.zip


JT Jorge Tirado April 19, 2023 12:14 AM UTC

Hi,

I am having the same problem as Sheldon. The thing is that the following code works perfectly:


<SfDatePicker ID="dtEffDate" CssClass="e-custom e-custom-150" TValue="DateTime" FloatLabelType="@FloatLabelType.Auto" @bind-Value="@mod.SpecialtyProcedureEffDate" Placeholder="Effective Date" Enabled="@blCancel"></SfDatePicker>

<SfTooltip ID="Tooltip" Target="#dtEffDate" Content="@strSpecialty"  />


But the following does not show the tooltip:

<SfDropDownList ID="lstSpecialty" @bind-Value="@intSpecialtyID" CssClass="e-custom" Width="250px" PopupWidth="400px" PopupHeight="300px" Placeholder="Specialty" DataSource="@tblSpecialties" FloatLabelType="@FloatLabelType.Auto" Autofill="true" AllowFiltering="true" AllowCustom="false" ShowClearButton="false" Enabled="@blCancel">

               <DropDownListEvents TValue="int" TItem="@tbSpecialtyFill" ValueChange="@fnOnSpecialtyChange"/>

               <DropDownListFieldSettings Text="SpecialtyCode" Value="SpecialtyID"></DropDownListFieldSettings/>

</SfDropDownList>

<SfTooltip ID="Tooltip" Target="#lstSpecialty" Content="@strSpecialty" />


The problem with the example you gave is that it will show the same tooltip to all ddl on the form and I want different tooltips for each ddl.




LD LeoLavanya Dhanaraj Syncfusion Team April 19, 2023 05:48 PM UTC

Jorge, based on the code details you've shared, we have validated the mentioned issue with the Dropdown List Tooltip component. The reported issue occurs when the Tooltip Target property is not properly appended to the Tooltip while setting the Dropdown List ID as the Tooltip Target value. To solve this issue, you can set the Tooltip Target value as a class name using the DropdownList CssClass property and map it to the Tooltip component. For your reference, we have included a modified sample.


Please refer to the code snippets below:


[Index.razor]

<SfTooltip ID="DatePickerTooltip" Target="#dtEffDate" Content="DatePicker"  />

<SfDatePicker ID="dtEffDate" CssClass="e-custom e-custom-150" ></SfDatePicker>

 

<SfTooltip ID="Dropdown2Tooltip" Target=".lstSpecialty1" Content="Dropdown1" />

<SfDropDownList CssClass="lstSpecialty1" TValue="string" >

    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>

</SfDropDownList>

 

<SfTooltip ID="Dropdown1Tooltip" Target=".lstSpecialty2" Content="Dropdown2" />

<SfDropDownList TValue="string" CssClass="lstSpecialty2" >

    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>

</SfDropDownList>


Please review the attached sample and details on your end. Please reach out to us if you need further assistance.


Attachment: DropDownListTooltip_ca8c6aa3.zip

Loader.
Up arrow icon