Tooltip on ChipListChip not showing ?

[toke]

Chiplist gets show, but no tooltip ?

        <SfChipList > 

            <ChipListEvents OnClick="@OnClick"></ChipListEvents>

            <ChipCollection>

                @foreach (var chipData in FixedSizes)

                {

                    <SfTooltip Position="Position.BottomCenter" OpensOn="Hover">

                        <TooltipTemplates>

                            <Content>

                                This is my tooltip explaining something about the chip but it doesnt get shown!

                            </Content>

                        </TooltipTemplates>

                        <ChipListChip

                            Text="@chipData.Key"

                            CssClass="e-primary e-outline"

                            Enabled="true">

                        </ChipListChip>

                    </SfTooltip>

                }

            </ChipCollection>

        </SfChipList> 

[Sowmiya Padmanaban]

Hi Toke,  

  

Greetings from Syncfusion support. 

 

We have checked your requirement with Tooltip component. To achieve your requirement,  you need to bind the target property for Tooltip component. 

 

Refer the below code snippet. 

 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.Popups 

<SfTooltip Target=".e-chip-collection" > 

    <TooltipTemplates> 

        <Content> 

            This is my tooltip explaining something about the chip but it doesnt get shown! 

        </Content> 

    </TooltipTemplates> 

    <SfChipList> 

        <ChipListEvents></ChipListEvents> 

        <ChipCollection> 

            @foreach (var chipData in ChipData) 

            { 

                <ChipListChip Text="@chipData.text" 

                              CssClass="e-chip-collection" 

                              Enabled="true"> 

                </ChipListChip> 

            } 

        </ChipCollection> 

    </SfChipList> 

</SfTooltip> 

 

Please download the sample from the following link. 

 

https://www.syncfusion.com/downloads/support/forum/157876/ze/Tooltip-833046241.zip 

 

Please, refer the below similar forum based on your requirement. 

 

http://www.syncfusion.com/forums/157328/ 

 

Please, refer the following link for Tooltip component. 

 

UG documentation-https://blazor.syncfusion.com/documentation/tooltip/getting-started/ 

 

Demo link-https://blazor.syncfusion.com/demos/tooltip/default 

 

API reference-https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Popups.SfTooltip_members.html 

 

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

 

Regards,  

Sowmiya.P 

[toke]

Is there a way to make an individual tooltip PER chip in the chiplist? 

kr

Toke

[Sowmiya Padmanaban]

Hi Toke,  

 

We have provided title attribute support for Tooltip component. When you set the title attribute in HtmlAttributes for chip component, it takes the corresponding value as content of Tooltip component.  

 

Refer the below code snippet. 

 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.Popups 

    <SfTooltip Target=".e-chip-collection"  @ref="tooltip"> 

        <SfChipList EnableDelete="true" @ref="chip" ID="chip"> 

            <ChipCollection> 

                @foreach (ChipCollection currentData in ChipData) 

                { 

                    <ChipListChip CssClass="e-chip-collection" HtmlAttributes="@currentData.htmlAttribute" [email protected]></ChipListChip> 

                } 

            </ChipCollection> 

        </SfChipList> 

    </SfTooltip> 

            @code { 

                SfTooltip tooltip; 

                SfChipList chip; 

                public List<ChipCollection> ChipData = new List<ChipCollection>(); 

                public class ChipCollection 

                { 

                    public string text { get; set; } 

                    public bool enabled { get; set; } 

                    public Dictionary<string, object> htmlAttribute { get; set; } 

                } 

                protected override void OnInitialized() 

                { 

                    ChipData.Add(new ChipCollection 

                    { 

                        text = "Jenifer", 

                        enabled = true, 

                        htmlAttribute = new Dictionary<string, object>() { { "title", "Jenifer" } } 

 

                    }); 

                    ChipData.Add(new ChipCollection 

                    { 

                        text = "Amenda", 

                        enabled = true, 

                        htmlAttribute = new Dictionary<string, object>() { { "title", "Amenda" } } 

                    }); 

                    ChipData.Add(new ChipCollection 

                    { 

                        text = "Isabella", 

                        enabled = true, 

                        htmlAttribute = new Dictionary<string, object>() { { "title", "Isabella" } } 

                    }); 

                    ChipData.Add(new ChipCollection 

                    { 

                        text = "James", 

                        enabled = true, 

                        htmlAttribute = new Dictionary<string, object>() { { "title", "James" } } 

                    }); 

                } 

            } 

 

Please, download the sample from the following link. 

 

https://www.syncfusion.com/downloads/support/forum/157876/ze/Chip513706320.zip 

 

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

 

Regards,  

Sowmiya.P