Unplanned
Last Updated: 20 Oct 2020 08:49 by ADMIN

When you move the mouse over the grid cells in this example, several tooltips can remain shown, especially if you move the mouse down so it goes through a tooltip when going towards the next row, and you move it quickly.

 

<div class="row">
    <TelerikGrid Data="@Items">
        <RowTemplate Context="sampleData">
            @{
                string detailLink = $"info/{sampleData.Id}";
                string className = $"screenshot-hover-{sampleData.Id}";
                string selector = $".{className}";
                <td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
                    <NavLink href="@detailLink">@sampleData.Name</NavLink>
                </td>
                <td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
                    <NavLink href="@detailLink">@sampleData.Name</NavLink>
                </td>
                <td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
                    <NavLink href="@detailLink">@sampleData.Name</NavLink>
                </td>
                <TelerikTooltip TargetSelector="@selector" ShowOn="@TooltipShowEvent.Hover" Position="@TooltipPosition.Bottom">
                    <Template Context="ttipContext">
                        @{
                            var dataAttributes = ttipContext.DataAttributes;
                            var title = ttipContext.Title;
                            if (title != null && dataAttributes.ContainsKey("id"))
                            {
                                <img src="images/@(dataAttributes["id"])" alt="@title" />
                                <p>@title</p>
                            }
                        }
                    </Template>
                </TelerikTooltip>
            }
        </RowTemplate>

        <GridColumns>
            <GridColumn Field="@(nameof(SampleData.Name))" />
            <GridColumn Field="@(nameof(SampleData.Address))" />
            <GridColumn Field="@(nameof(SampleData.PhoneNumber))" />
        </GridColumns>
    </TelerikGrid>
</div>

@code {
    class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string PhoneNumber { get; set; }
    }

    SampleData[] Items { get; set; }

    protected async override Task OnInitializedAsync()
    {
        const int sampleSize = 25;
        Items = new SampleData[sampleSize];
        for (int i = 0; i < sampleSize; i++)
        {
            Items[i] = new SampleData
            {
                Id = i,
                Name = $"{i}.SomeName",
                Address = $"{i}{i}{i}{i} Cherry Lane",
                PhoneNumber = $"1-512-{i % 100:00}4-6000",
            };

        }

        await Task.CompletedTask;
    }
}

Declined
Last Updated: 19 Oct 2020 12:56 by ADMIN
Created by: Joonas
Comments: 1
Category: Tooltip
Type: Feature Request
0

When I have some dynamic content inside the tooltip template, the tooltip seems not to be re-rendering. E.g. when I have a tooltip with a text input and button and wish to disable the button when no text is entered, the tooltip seems to be only refreshing after closing and re-opening it. Simplified example:

 

<TelerikTooltip TargetSelector=".search-tooltip" Position="TooltipPosition.Bottom" ShowOn="TooltipShowEvent.Click">
	<Template>
		<TelerikTextBox @bind-Value="@SearchText"></TelerikTextBox>
		<TelerikButton OnClick="@Search" Enabled="@(!string.IsNullOrEmpty(SearchText))">Search</TelerikButton>
	</Template>
</TelerikTooltip>

 

Even tried using the ValueChanged event of the TelerikTextBox and calling the StateHasChanged() method but had the same result (the enabled/disabled state of button only changed after closing&re-opening the tooltip).

 

I would expect the binding and re-rendering to work as normally in Blazor. Is there a way to manually 'call refresh' on the tooltip?

Unplanned
Last Updated: 15 Jul 2020 13:03 by ADMIN
Created by: Tyler
Comments: 0
Category: Tooltip
Type: Feature Request
2

I would like to be able to do something like the following - cause the tooltip to close from my code:

<TelerikTooltip TargetSelector="#tooltip1" ShowOn="@TooltipShowEvent.Click" @ref="@TooltipRef">     
            <Template>
                 Content Here
                <button type="button" class="btn btn-primary" @onclick="tipClose">Save</button>                
            </Template>
</TelerikTooltip>

<a href="#" id="tooltip1" class="btn btn-secondary">open</a>

@code{
 Telerik.Blazor.Components.TelerikTooltip TooltipRef { get; set; }

void tipClose()
    {
       // TooltipRef ?
    }


}

Duplicated
Last Updated: 14 Apr 2020 12:00 by ADMIN

1. Place two spans with titles right next to each other.

2. Add Telerik Tooltip with target span[title]

3. Hover over first span -> Tooltip is displayed correctly

4. Move Mouse Cursor from first span to second span -> Tooltip of second span is displayed twice: Once at correct position and once at top left of screen.

Unplanned
Last Updated: 14 Apr 2020 06:39 by ADMIN

Unfortunately the tooltip component does only work for elements that are present at first rendering.

If elements are surrounded by an if-condition which becomes true at a later point in time, the tooltip is not displayed.

Our usecase:  We have tables where some data is computed after displaying the rest of the table.  The computing and displaying works and the title is there (and shown in the default windows tooltip) but the Telerik tooltip is not displayed.

Declined
Last Updated: 08 Apr 2020 16:26 by ADMIN
Created by: René
Comments: 2
Category: Tooltip
Type: Bug Report
1
The tooltip ignores newlines.  I tried "\n" and "\n\r" and "<br>" and "<br\>" but neither works.