Is tooltip supported by ChipItem?

[Niklas Kjellander]

Is it possible to use the SfTooltip component to get a tooltip when hovering a chip item in the SfChip component?

I've tried the following but it does not seem to work (omitted code is replaced with "..." to make example smaller).

<SfChip Selection=Syncfusion.Blazor.Buttons.SelectionType.Single ...>
   <ChipItems>
         @foreach (...)
         {
            <SfTooltip Position="Position.TopCenter"Content="...">
               <ChipItem ... />
            </SfTooltip>
         }
   </ChipItems>
</SfChip>

Kindly,
Niklas

[LeoLavanya Dhanaraj]

Hi Niklas,

Greetings from Syncfusion support.

Based on the information you provided, we understand that you would like to dynamically render a Chip component and append a Tooltip to it. In response to your request, we have prepared the Blazor Chip component with a Tooltip. In this implementation, we have dynamically rendered a Chip component and set the Tooltip Target value to the Chip's ID. Check out the below mentioned code snippets for further assistance.

Sample : https://blazorplayground.syncfusion.com/LZrztmVeSaIbILwv

@if (ResourcenItemList.Count > 0)

{

    <SfChip >

        <ChipItems>

            @foreach (var item in ResourcenItemList)

            {

                var newId = item.Id;

                var tooltipId = item.Id.ToString();

                string chipId = "chip";

                chipId = chipId + newId.ToString();

                var chipAttributes = new Dictionary<string, object>

                { { "id", chipId } };

                chipId = "#" + chipId;

                <SfTooltip  Content="@item.Info" ID="@tooltipId" Position="Syncfusion.Blazor.Popups.Position.BottomCenter" Target="@chipId" WindowCollision=true>

                    <ChipItem Text="@item.ResourceName" Enabled="true" HtmlAttributes="chipAttributes"  />

                </SfTooltip>

            }

        </ChipItems>

    </SfChip>

}

 

@code {

    public class ResourceItem

    {

        public int Id { get; set; }

        public string ResourceName { get; set; }

        public string Info { get; set; }

    }

 

    List<ResourceItem> ResourcenItemList = new List<ResourceItem>

    {

        new ResourceItem { Id = 1, ResourceName = "Item 1", Info = "Tooltip info 1" },

        new ResourceItem { Id = 2, ResourceName = "Item 2", Info = "Tooltip info 2" },

        new ResourceItem { Id = 3, ResourceName = "Item 3", Info = "Tooltip info 3" },

        new ResourceItem { Id = 4, ResourceName = "Item 4", Info = "Tooltip info 4" },

        // Add more items as needed

    };

}

Refer the shared details and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Niklas Kjellander]

Thanks for the example, I missed out on the HTML attributes from the documentation.

Kindly,

Niklas

[Niklas Kjellander]

Something strange seem to happen with the tooltips once you click on a chip, the tooltip does not get closed and if you hover the other chips, their tooltips are not closed either when mouse pointer is moved away from chip.

I could reproduce it in the linked sample provided above.

[LeoLavanya Dhanaraj]

Hi Niklas,

We would like to inform you about the Tooltip OpensOn property. Depending on your application's needs, you can configure when the Tooltip appears relative to its target element. For example:

• If you set OpensOn to "Hover," the Tooltip will appear when you hover over the target element.
• If you set OpensOn to "Click," the Tooltip will appear when you click the target element and will close when you click the same target element again.

Refer the below samples to know more about the Tooltip display actions.

OpensOn=Click: https://blazorplayground.syncfusion.com/rXrpDmAZfXdironw

OpensOn=Hover : https://blazorplayground.syncfusion.com/BDhzXmqXztHwTqQU

Also, please refer the below documentation link to know more about the Tooltip open mode.

https://blazor.syncfusion.com/documentation/tooltip/open-mode

Regards,

Leo Lavanya Dhanaraj

[Niklas Kjellander]

Leo, thanks for the assistance.

Kindly,

Niklas