1. Home
  2. Forum
  3. Blazor
  4. Is it possible to have a tooltip when hovering on a Listbox item?

Is it possible to have a tooltip when hovering on a Listbox item?

Hi there, please if you can help me with 
  1. I would like to have a tooltip when hovering on a Listbox item, 
  2. also would like to know if is possible to have this behavior with Listbox templates

This is what I'm currently trying based on this tread ListView with tooltip | Blazor Forums | Syncfusion

@page "/counter"

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Popups

<SfTooltip @ref="tooltip" ID="tooltip" Target=".e-list-item" OnRender="onRender">
    <SfListBox TValue="string[]" DataSource="@Vehicles" TItem="VehicleData">
        <ListBoxFieldSettings Text="Text" Value="Id" />
        <ListBoxSelectionSettings ShowCheckbox ShowSelectAll />
    </SfListBox>
</SfTooltip>

@code {
    SfTooltip tooltip { get; set; }

    public List<VehicleData> Vehicles = new List<VehicleData> {
        new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
        new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
        new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" },
        new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
        new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
        new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
        new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
        new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
    };

    public class VehicleData
    {
        public string Text { get; set; }
        public string Id { get; set; }
    }

    public void onRender(TooltipEventArgs args)
    {
        for (int i = 0; i < Vehicles.Count; i++)
        {
            if (args.Target.ID == "_" + Vehicles[i].Id)
            {
                tooltip.Content = Vehicles[i].Text;
            }
        }
    }
}

7 Replies 1 reply marked as answer
GK Gayathri KarunaiAnandam Syncfusion Team February 11, 2021 02:40 PM UTC

Hi Daniel, 

Thank you for contacting Syncfusion support. 

We have checked your reported query. We can achieve your requirement by using ItemTemplate for showing tooltip in Listbox component as demonstrated in the below code snippet. 

Index.razor 
 
<SfListBox TValue="string[]" DataSource="@Vehicles" TItem="VehicleData" ID="Id" > 
        <ListBoxFieldSettings Text="Text" Value="Id" /> 
        <ListBoxTemplates TItem="VehicleData" Context="VehicleDatas"> 
        <ItemTemplate> 
            <div style="padding:10px" title="@VehicleDatas.Text"> 
                @VehicleDatas.Text 
            </div> 
            </ItemTemplate> 
</ListBoxTemplates> 
    </SfListBox> 
 
For your reference, we have prepared a sample based on this scenario. Please check the below link. 


Please check the above sample and get back to us, if you need further assistance. 

Regards, 
Gayathri K 


Marked as answer
DA Daniel February 12, 2021 01:28 AM UTC

Thanks Gayathri!

Please I need help with this scenario that refers to the 2nd point of my initial post, I have many Listboxes and all of them need the tooltip functionality, I was thinking on a way to avoid using the templates for all of them, kind of a wrapped Listbox, that already has the tooltip functionality, another thing is that some of the Listboxes that I have already use templates so I was thinking on a way to support that on my wrapped ListBox too, I mean something like a ListBoxWithTooltip component that supports templates too. I'll try to provide draft of what I'm looking later, but if you could give me some hints or help with that I would be very greatful.

Daniel

GK Gayathri KarunaiAnandam Syncfusion Team February 12, 2021 01:23 PM UTC

Hi Daniel, 
 
We have checked your reported query. We can achieve your requirement using custom component as demonstrated in the below code snippet 
 
CustomListbox.razor 
 
@page "/CustomListbox" 
 
@using Syncfusion.Blazor.DropDowns 
@using Syncfusion.Blazor.Popups 
@using Listbox.Pages  
 
 
<SfListBox TValue="string[]" DataSource="@DataSource" TItem="VehicleData" ID="Id"> 
    <ListBoxFieldSettings Text="Text" Value="Id" /> 
    <ListBoxTemplates TItem="VehicleData" Context="VehicleDatas"> 
        <ItemTemplate> 
            <div style="padding:10px" title="@VehicleDatas.Text"> 
                @VehicleDatas.Text 
            </div> 
        </ItemTemplate> 
    </ListBoxTemplates> 
</SfListBox> 
 
 
@code { 
    [Parameter] 
    public List<VehicleData> DataSource { get; set; } 
} 
 
<style> 
    .e-listbox-container:not(.e-list-template) .e-list-item { 
        height: 45px; 
    } 
</style> 
 
Index.razor 
<h5>Listbox1</h5> 
<CustomListbox DataSource="@Vehicles"></CustomListbox> 
<h5>Listbox2</h5> 
<CustomListbox DataSource="@Cars"> 
<h5>Listbox3</h5> 
<CustomListbox DataSource="@Automobiles"></CustomListbox> 
 
@code { 
    public List<VehicleData> Vehicles = new List<VehicleData> { 
        new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" }, 
        new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" }, 
        new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" }, 
 
    }; 
    public List<VehicleData> Cars = new List<VehicleData> { 
 
        new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-01" }, 
        new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-02" }, 
        new VehicleData { Text = "McLaren F1", Id = "Vehicle-03" }, 
    }; 
    public List<VehicleData> Automobiles = new List<VehicleData> { 
        new VehicleData { Text = "Benz", Id = "Vehicle-01" }, 
        new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-02" }, 
        new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-03" } 
    }; 
 
} 
 
VehicleData.cs 
 
public class VehicleData 
    { 
        public string Text { get; set; } 
        public string Id { get; set; } 
    } 
 
 
For your reference, we have prepared a sample based on your requirement. Please check the below link. 
 
 
Please check the above link and get back to us, if you need further assistance. 
 
Regards, 
Gayathri K 


DA Daniel February 19, 2021 01:39 PM UTC

Thanks for the response Gayathri!

I have different TItems for my ListBoxes and I need to use templates in some of those, and by passing the a ShowTooltip show the tooltip automatically in any case, so I what I'm trying to archive is something like this, the tooltip should show automatically for ListBox1 and ListBox2 you gave me an idea with the "title" attribute, I would be grateful for any other hints.

<h5>Listbox1</h5>
<CustomListbox DataSource="@Automobiles"
               TValue="string[]"
               TItem="VehicleData"
               ShowTooltip>
</CustomListbox>

<h5>Listbox2</h5>
<CustomListbox DataSource="@Other DataSource"
               TValue="string[]"
               TItem="OtherTItem"
               ShowTooltip>
    <CustomListBoxTemplate TItem="OtherTItem" Context="OtherTItemDatas">
        <div class="custom-class">
            @VehicleDatas.Text
        </div>
    </CustomListBoxTemplate>
</CustomListbox>

GK Gayathri KarunaiAnandam Syncfusion Team February 22, 2021 11:15 AM UTC

Hi Daniel, 
 
Sorry for the inconvenience. 
 
We have checked you reported query. We would like to inform that we can achieve your requirement using ItemTemplate only. We don’t have support for tooltip in Listbox component. 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Gayathri K 


DA Daniel February 22, 2021 04:29 PM UTC

 Hi Gayathri,

I ended up doing this on my custom ListBox component, and is working fine, the only downside of this approach is that the css styles broke after this change so it is necessary to write some custom styles for this to work according to your requirements, maybe this could be useful for other people. JIC  ListBoxTemplate  is a RenderFragment that I'm passing to my custom ListBox

            <ListBoxTemplates TItem="TItem">
                <ItemTemplate>
                    @{
                        var text = context.GetType().GetProperty(Text).GetValue(context);

                        <span class="sprbrk-listbox-item" title="@(ShowTooltip ? text : string.Empty)">
                            @if (ListBoxTemplate != null)
                            {
                                @ListBoxTemplate(context)
                            }
                            else
                            {
                                @text
                            }
                        </span>
                    }
                </ItemTemplate>
            </ListBoxTemplates>

GK Gayathri KarunaiAnandam Syncfusion Team February 23, 2021 03:16 PM UTC

  
Hi Daniel, 

We have checked your reported query and we cannot be able to replicate the reported issue. We have prepared a video demonstration. Please check the below link. 



If you are still facing the issue, kindly share the below details. 
  • If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample.
  • If you are using customization, please share the customization code.
  • Please share the Code snippet of the CSS style you are using in the component.
 
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

Regards, 
Gayathri K 


Loader.
Up arrow icon