How can I set the tooltip to show/hide programmatically? right not it only supports hover or click show action.

---

ADMIN EDIT

You can Follow a way to hide the tooltip programmatically here: https://feedback.telerik.com/blazor/1476364-close-tooltip-via-method.

You can find a way to hack the show event by triggering a JS click in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/common-validation-error-in-tooltip.

Here is an example that shows how you can trigger the tooltip to show for a particular target:

@inject IJSRuntime _js

<script suppress-error="BL9992">
    function triggerTooltip(index, selector, showOnClick) {
        var targets = document.querySelectorAll(selector);
        if (targets && targets.length >= index) {
            var desiredTarget = targets[index];//feel free to get the desired target in any other way
            setTimeout(function () {
                var evt = document.createEvent('MouseEvent');
                var evtToSimulate = showOnClick ? "click" : "mouseenter";
                evt.initEvent(evtToSimulate, true, false);
                desiredTarget.dispatchEvent(evt);
            }, 20);
        }
    }
</script>

<TelerikButton OnClick="@( async () => await TriggerTooltip(0) )">Trigger tooltip for the first target</TelerikButton>
<TelerikButton OnClick="@( async () => await TriggerTooltip(1) )">Trigger tooltip for the SECOND target</TelerikButton>

<TelerikTooltip TargetSelector="@ttipTargetSelector" ShowOn="@ShowOnSetting">
</TelerikTooltip>



<p id="my-targets">
    <strong title="what is 'lorem ipsum'?">lorem</strong>
    ipsum dolor
    <strong title="is this a real word?">sit</strong>
    amet.
</p>

@code{
    string ttipTargetSelector = "p#my-targets [title]";
    TooltipShowEvent ShowOnSetting { get; set; } = TooltipShowEvent.Click;
    async Task TriggerTooltip(int targetIndex)
    {
        await _js.InvokeVoidAsync("triggerTooltip", 
                targetIndex, 
                ttipTargetSelector, 
                ShowOnSetting == TooltipShowEvent.Click ? true : false
             );
    }
}

---

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.

Is there a way to add some delay to the TelerikTooltip component show event? I would like to force the user to hover in the element for a couple of seconds before he can see the tooltip.

Like in the ajax tooltip demo.

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 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 ?
    }


}

I'm using the ToolTip component to display tooltips for anything that has a "title":

<TelerikTooltip TargetSelector="[title]"></TelerikTooltip>

I've got a popup window with a close button that displays the tooltip "Close".

Upon clicking the button and the window closing, the tooltip remains until I click something or another tooltip appears.

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)

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')

I want to have an option to prevent tooltips from closing and having multiple tooltips attached to different elements, all visible simultaneously/independently.

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.

Tooltip does not show if moving from one element with Tooltip to another and both elements are placed directly next to each other.

Example: If a number of Buttons (with title) are placed right next to each other if mouse is moved over the first one the tooltip is displayed correctly. If the mouse is moved to the next one the first tooltip closes but the second one does not show. Moving on to the third button the tooltip is displayed correctly again.

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.

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.

---

I need to make a tooltip more accessible.

---

ADMIN EDIT

The first thing you can do is use the aria-describedby on the tooltip targets and use its value in the tooltip Id parameter to help screen readers. It is up to the screen reader to detect the change in the DOM and read out the new content.

This item is to add attributes to the tooltip such as role="tooltip", aria-live="polite", role="presentation", aria-hidden="false". The exact attributes will depend on more detailed research and may differ from what I have listed here.

---

Using a target selector for HTML elements with a specific attribute within an SVG does not work

The following snippet worked correctly in 2.26.0 and older versions but does not work in 2.27.0

<TelerikArcGauge>
    <ArcGaugeCenterLabel>
        <Template>
            @(context.Pointers[0].Value)
        </Template>
    </ArcGaugeCenterLabel>
    <ArcGaugeScales>
        <ArcGaugeScale Min="0" Max="100">
        </ArcGaugeScale>
    </ArcGaugeScales>
    <ArcGaugePointers>
        <ArcGaugePointer Color="#FFE162" Value="@FirstPointerValue"></ArcGaugePointer>
    </ArcGaugePointers>
</TelerikArcGauge>

<TelerikTooltip TargetSelector="path[stroke='#FFE162']" Position="TooltipPosition.Top" ShowOn="@TooltipShowEvent.Hover" Id="first-pointer">
    <Template>
        <p>Value is: @FirstPointerValue</p>
    </Template>
</TelerikTooltip>

@code {
    public int FirstPointerValue { get; set; } = 20;
}

Best Regards,

Radko

Since 2.27 I have a weird behaviour when I try to open a tooltip that should be shown on click. This is a sample:

<span id="tooltip-here">
    <span style="background-color: gray">Text 1</span>
    gap
    <span style="background-color: gray">Text 2</span>
</span>
<TelerikTooltip TargetSelector="#tooltip-here" ShowOn="TooltipShowEvent.Click" />

In 2.26 the tooltip was shown when I clicked in any element inside the outer span. Check file 226.gif.

Now, in 2.27 it is being shown just when I click on the "gap". Check file 227.gif.


Thanks!