Controlling Tooltip Trigger Time in Kendo UI for ASP.NET MVC
Environment
| Product | Version |
|---|---|
| Progress® Kendo UI® ToolTip for ASP.NET MVC | 2021.2.511 |
Description
I want to control the trigger time for the Kendo UI Tooltip. The tooltip should not display immediately upon hover. Instead, it should only trigger after the cursor has been over the target element for more than one second. The current behavior triggers the tooltip on any mouseover, but I want to delay this so the tooltip does not show if the hover duration is less than a few seconds (specifically 1 second here).
This KB article also answers the following questions:
- How to delay the display of a tooltip in ASP.NET MVC?
- How to implement a hover delay for Kendo UI Tooltip?
- How to prevent a tooltip from showing immediately upon mouseover in Kendo UI for ASP.NET MVC?
Solution
To delay the tooltip trigger in Kendo UI for ASP.NET MVC, follow these steps:
- Add an HTML element (the target for the tooltip) and its wrapper element.
- In the global scope of the JavaScript, set two variables:
counterandmyInterval. These variables will count the hover time. - Use the
document.readyscope to handle thehoverevent of the target element. - Utilize the
setIntervalmethod to start counting every second upon hover. - Configure the tooltip and show it based on the counter value.
- Use a callback function to clear the interval and destroy the tooltip when the mouse leaves the element.
Below is an example implementation:
<!-- The HTML -->
<span id="container">
<span id="testBtn" class="k-button wider">Hover me!</span>
</span>
// The JavaScript
<script>
var counter = 0;
var myInterval = null;
$(document).ready(function () {
$("#testBtn").hover(function (e) {
counter = 0; // Reset counter on hover
myInterval = setInterval(function () {
++counter;
if (counter >= 1) { // Check if hover duration is more than 1 second
var tooltip = $("#container").kendoTooltip({
content: "Hello!",
}).data("kendoTooltip");
tooltip.show();
}
}, 1000); // Set interval to 1000 milliseconds (1 second)
}, function (e) {
clearInterval(myInterval); // Clear interval on mouse leave
$("#container").data("kendoTooltip").destroy(); // Destroy tooltip
});
});
</script>
This implementation sets the tooltip to trigger after hovering over the target element for more than one second. Adjust the interval duration (1000 milliseconds in this example) as needed to change the delay before the tooltip triggers.
Notes
- The example sets the interval to 1000 milliseconds (1 second) to delay the tooltip trigger. Adjust this value to meet your specific requirements.
- Ensure that you destroy the tooltip on mouse leave to avoid memory leaks and unexpected behavior.