How can i break text in tooltip?

[Tomasz S.]

I have tooltip like

                                    <SfTooltip>

                                        <ContentTemplate>

                                            one \r\n two \r\n six

                                        </ContentTemplate>

                                        <ChildContent>

                                            <span>3 lines</span>

                                        </ChildContent>

                                    </SfTooltip>

how to show 3 lines in tooltip?

[Prasanth Madhaiyan]

Hi Tomasz,

Greetings from Syncfusion support.

Based on the shared details, we understand that your requirement is to display multiple lines in the Blazor Tooltip component. However, to achieve your mentioned requirement, you can use the HTML <br/> tag instead of \r\n for line breaks inside the ContentTemplate.

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

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Tomasz S.]

It not working for this situation:

                    <GridColumn .....>

                        <Template>

                            @{

                                var product = (context as ProductListVM);

                                    <SfTooltip>

                                        <ContentTemplate>

                                            @string.Join("<br/>", @products)

                                        </ContentTemplate>

                                        <ChildContent>

                                            @products.Count

                                        </ChildContent>

                                    </SfTooltip>

                            }

                        </Template>

                    </GridColumn>

[Prasanth Madhaiyan]

Hi Tomasz,

Based on the shared details, we understand that you are displaying (multiple lines) a custom tooltip in the Grid column using the Column Template feature by rendering the SfTooltip component inside the template on your end. However, to meet your mentioned requirement, you can refer to the below code snippets to achieve it on your end.

…

 

<SfGrid DataSource="@Employees">

    <GridColumns>

        …

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130">

            <Template>

                @{

                    var employee = (context as EmployeeData);

                    Count++;

                    <SfTooltip @key="@Count" >

                        <ContentTemplate>

                            <div>

                                <strong>First Name:</strong> @employee.FirstName.Split(' ')[0]

                            </div>

                            <div>

                                <strong>First ID:</strong> @employee.FirstName.Split(' ')[1]

                            </div>

                            <div>

                                <strong>Second ID:</strong> @employee.FirstName.Split(' ')[2]

                            </div>

                        </ContentTemplate>

                        <ChildContent>

                            <span>@employee.FirstName</span>

                        </ChildContent>

                    </SfTooltip>

                }

            </Template>

        </GridColumn>

        …

    </GridColumns>

</SfGrid>

 

@code {

    public List<EmployeeData> Employees { get; set; }

 

    int Count { get; set; } = 0;

 

    protected override void OnInitialized()

    {

        Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData()

            {

                EmployeeID = x,

                FirstName = (new string[] { "Nancy 1 9 ", "Andrew 2 8 ", "Janet 3 7 ", "Margaret 4 6", "Steven 5 5" })[new Random().Next(5)],

                LastName = (new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)],

                Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager",

                                    "Inside Sales Coordinator" })[new Random().Next(4)],

                HireDate = DateTime.Now.AddDays(-x),

            }).ToList();

    }

 

    public class EmployeeData

    {

        public int? EmployeeID { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Title { get; set; }

        public DateTime? HireDate { get; set; }

    }

}

For your reference, we have attached the sample and screenshot.

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

Screenshot:

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Tomasz S.]

Thanks. I see idea
                                        <ContentTemplate>

                                            @foreach (var category in Categories)

                                            {

                                                <div>

                                                    @category

                                                </div>

                                            }

                                        </ContentTemplate>

[Prasanth Madhaiyan]

Hi Tomasz,

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Prasanth Madhaiyan.