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.
---
Please consider the ToolTip's ability to track changes in its target and update its own position accordingly.
A good example for this is the integration between the ToolTip and the Slider drag handle.
If the element of the tooltip is on top of the screen (almost outside of the viewport), hovering the remaining part of the element makes the tooltip create a flashing effect.
Please watch the attached video.
Add the ability to display the Tooltip on target focus, similar to how we can configure display on mouse enter or click.
Currently, a possible workaround is to simulate user mouse moves:
@inject IJSRuntime js
<input />
<span id="span1" title="Tooltip 111"
@onfocusin="@( (FocusEventArgs args) => OnTextBoxFocusIn(args, "#span1") )">
<TelerikTextBox @bind-Value="@TextBoxValue"
OnBlur="@( () => OnTextBoxBlur("#span1") )"
Width="200px" />
</span>
<span id="span2" title="Tooltip 222"
@onfocusin="@( (FocusEventArgs args) => OnTextBoxFocusIn(args, "#span2") )">
<TelerikTextBox @bind-Value="@TextBoxValue"
OnBlur="@( () => OnTextBoxBlur("#span2") )"
Width="200px" />
</span>
<input />
<TelerikTooltip TargetSelector="span[title]" />
<script suppress-error="BL9992" nonce="BL9992">//
function showTooltip(selector) {
var target = document.querySelector(selector);
if (target) {
setTimeout(function () {
var event = document.createEvent("MouseEvent");
event.initEvent("mouseenter", true, false);
target.dispatchEvent(event);
});
}
}
function hideTooltip(selector) {
var target = document.querySelector(selector);
if (target) {
setTimeout(function () {
var event = document.createEvent("MouseEvent");
event.initEvent("mouseleave", true, false);
target.dispatchEvent(event);
});
}
}
//</script>
@code {
private string TextBoxValue { get; set; } = "Focus me...";
private async void OnTextBoxFocusIn(FocusEventArgs args, string selector)
{
await js.InvokeVoidAsync("showTooltip", selector);
}
private async Task OnTextBoxBlur(string selector)
{
await js.InvokeVoidAsync("hideTooltip", selector);
}
}