I have a div which has a couple of buttons contained within it on the lower left corner. I have a TelerikTooltip with the target selector pointed to my div. Most of the time the tooltip works fine but I have found that if I move the mouse onto the div from the lower left corner where the buttons are, the TelerikTooltip shows up correctly while the mouse is over the buttons but when I move the mouse farther into the div and away from the buttons the TelerikTooltip gets hidden and a default tooltip is displayed.
It behaves this way whether I use a title on the div or a template on the TelerikTooltip.
As shown in the Tooltip - Show Event demo, the title does appear on hover as well as on click.
I was under the impression that this is not supposed to happen.
See the attached video for how to reproduce this.
A ToolTip will trigger a JavaScript error in the following scenarios:
- There is no TargetSelector.
- The TargetSelector does not match any elements on the page.
The JS error is thrown on mouse click:
TypeError: undefined is not an object (evaluating 't.getAttribute')
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;
}
}
I am getting the following error with them *only* when loading my site on an iPhone, after the page had been previously loaded on a PC.
2020-11-02T16:19:51.547Z] Error: Microsoft.JSInterop.JSException: An exception occurred executing JS interop: The JSON value could not be converted to System.Double. Path: $ | LineNumber: 0 | BytePositionInLine: 4.. See InnerException for more details.
---> System.Text.Json.JsonException: The JSON value could not be converted to System.Double. Path: $ | LineNumber: 0 | BytePositionInLine: 4.
---> System.InvalidOperationException: Cannot get the value of a token type 'Null' as a number.
at System.Text.Json.Utf8JsonReader.TryGetDouble(Double& value)
at System.Text.Json.Utf8JsonReader.GetDouble()
at System.Text.Json.Serialization.Converters.JsonConverterDouble.Read(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options)
at System.Text.Json.JsonPropertyInfoNotNullable`4.OnRead(ReadStack& state, Utf8JsonReader& reader)
at System.Text.Json.JsonSerializer.HandleNull(Utf8JsonReader& reader, ReadStack& state)
at System.Text.Json.JsonSerializer.ReadCore(JsonSerializerOptions options, Utf8JsonReader& reader, ReadStack& readStack)
--- End of inner exception stack trace ---
at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& readStack, Utf8JsonReader& reader, Exception ex)
at System.Text.Json.JsonSerializer.ReadCore(JsonSerializerOptions options, Utf8JsonReader& reader, ReadStack& readStack)
at System.Text.Json.JsonSerializer.ReadValueCore(JsonSerializerOptions options, Utf8JsonReader& reader, ReadStack& readStack)
at System.Text.Json.JsonSerializer.ReadValueCore(Utf8JsonReader& reader, Type returnType, JsonSerializerOptions options)
at System.Text.Json.JsonSerializer.Deserialize(Utf8JsonReader& reader, Type returnType, JsonSerializerOptions options)
at Microsoft.JSInterop.JSRuntime.EndInvokeJS(Int64 taskId, Boolean succeeded, Utf8JsonReader& jsonReader)
--- End of inner exception stack trace ---
at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikTooltip.OnAfterRenderAsync(Boolean firstRender)
Hover the mouse several times in a row at element c on the demo stand. OS Windows 10, Browsers: Chrome Version 87.0.4280.141 (Official Build) (64-bit) + Firefox Developer 85.0b9 (64-bit).
Tell me why the component periodically has 2 tooltips? This anomaly is also observed on your demo stand.
I want to have an option to prevent tooltips from closing and having multiple tooltips attached to different elements, all visible simultaneously/independently.
There's no way for me to specify a tooltip with both Hover and Click support.
I would like my tooltip to work for both desktop and mobile. Is there any way to do this?
This is what I'm doing now:
<TelerikTooltip ShowOn="@TooltipShowEvent.Click" TargetSelector="@("#val" + FieldName)" />
Here's what I'm looking to do:
<TelerikTooltip ShowOn="@TooltipShowEvent.Both" TargetSelector="@("#val" + FieldName)" />
---
ADMIN EDIT
This feature most probably will introduce a breaking change.
You can workaround this with using multiple TelerikTooltip declarations.
Check the attached file to see a sample implementation.
---
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?
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.