<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.
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?
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
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.
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> |
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.
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.