Telerik Forums
Kendo UI for jQuery Forum
1 answer
63 views

Hello,

I'm looking into making a kendoTooltip object keyboard accessible in Kendo for Angular:

                <div kendoTooltip showOn="[...]" position="bottom" tabindex="0">


I see in the documentation for jQuery here that the tooltip has a showOn property which can take values of type "mouseenter", "click", or "focus". I'd like to have the equivalent of "mouseenter focus" as the value. However, the supported values seem different in Angular: my options instead seem to be "click", "hover", or "none". Is there a way to give this object a 'focus'-type value in Angular?

Martin Bechev
Telerik team
 answered on 18 Mar 2025
3 answers
2.0K+ views

Hi, 

AS my title says, how do I add a tooltip to a disabled kendoButton, for the purpose of telling a user why its disabled.

Dojo: https://dojo.telerik.com/OTOpIrOV

Thanks, 

Grant

Martin
Telerik team
 answered on 26 Feb 2025
2 answers
1.2K+ views

I've been trying to figure a workaround for this problem.

Recently I've discovered that kendo tooltip isn't working on disable buttons.

I've made an example to show you:

http://dojo.telerik.com/EZogO/5

when the tooltip button is enable, kendo's tooltip work fine. But, if you disable the button it will stop working. 

The problem is that this doesn't prevent the browser from showing his default tooltip.

Is there any solution?

Thanks in advance.

Mikkel
Top achievements
Rank 1
Iron
 updated answer on 24 Feb 2025
1 answer
41 views

I would like to check how to add an icon to the grid header. The tooltip will only be shown when hovering the icon.

 

Martin
Telerik team
 answered on 13 Dec 2024
2 answers
218 views
I have been asked to add tooltips to a dropdownlist so a user can see more details about an item before selecting it. I found this solution https://docs.telerik.com/kendo-ui/knowledge-base/show-tooltip-for-items but it doesn't work right on touch devices. When you touch the screen, it selects the item, closes the list, and displays the tooltip until you click somewhere else on the screen. I kind of think maybe there should be a separate button for showing the tooltip vs selecting the item. How would I achieve this?
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
 updated answer on 25 Apr 2024
0 answers
166 views

let me explain what issue i am facing , i have two cloumns in kendogrid one is dropdown and other is simple textbox

let say dropodown column has (emailadress, website dropdown) now i want to match the exact expression of mail to the other column

if it matches then save the record if not matches than show the toolptip and prevent for saving changes

this is the code

save: function(e) {
                                    // Get the data item being saved
                                    var dataItem = e.model;

                                    // Access properties of the data item and perform actions accordingly
                                    var addressType = dataItem.intInternetAddressTypeID;
                                    var inputField = dataItem.strInternetAddress;

                                    // Perform validation or other actions based on the properties
                                    if (addressType === "2") {
                                        // Email validation for input field
                                        var emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
                                        if (!emailRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid email address format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    } else if (addressType === "10") {
                                        // Phone number validation for input field
                                        var phoneRegex = /^[0-9]+$/;
                                        if (!phoneRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid phone number format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    }
                                },

i also enable the tooltip from databound
dataBound: function (e) {
   e.sender.element.find("[data-strInternetAddress-msg]").each(function () {
                                    $(this).kendoTooltip({
                                        position: "bottom",
                                        content: $(this).attr("data-strInternetAddress-msg"),
                                    });
                                });
}but tooltip is not showing in the page , it preventing from saving but not showing tooltip after inspection i found that it creating this html

<td role="gridcell" data-container-for="strInternetAddress" data-strinternetaddress-msg="Invalid email address format"><input type="text" class="k-input k-textbox k-valid" name="strInternetAddress" required="required" data-required-msg="Internet Address is required" data-bind="value:strInternetAddress"></td>


Help me how to show the tooltip not alert i dont want alert

saurabh
Top achievements
Rank 1
 asked on 17 Apr 2024
1 answer
295 views

I am trying to add a tooltip to my page that covers the element it is triggered on. When I do so, it flashes instead of staying on. Here is a dojo. Hover your mouse over the text and see it flash.

https://dojo.telerik.com/AsoDIzAC


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.0/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
</head>
<body>
  
<span id="target" title="Tooltip content">
  Some content
</span>

<script>
  $(document).ready(function() {
    $("#target").kendoTooltip({
      position: "center",
      callout: false,
      showAfter: 1000
    });
  });
</script>
</body>
</html>

Neli
Telerik team
 answered on 13 Feb 2024
1 answer
96 views

Hi,

as the title says i'm trying to open an alert on the Select Event of a kendoContextMenu, but the alert is shown only after the Select function is completed, is it possible to show an alert as soon as the user clicks on the ContextMenu option (at the start of the Select Event)?

Below the Select Event of my code:

 select: function (e) {
     alert("Test Alert"); //This one appears only after that the Select function ends, but i'd want it to appear as soon as the select function starts

    //MY CODE
}

Thanks in advance,

- Antonio

Neli
Telerik team
 answered on 15 Dec 2023
1 answer
162 views

I'm trying to hide/disable the tooltip when you hover over a page number in pagination toolbar in the kendo grid:

Image

I've spend several hours reading the documentation and forums, awnsers are either outdated or do not seem to work.

How do I hide this tooltip/popup?

Regards,
Jorre Vedder

Neli
Telerik team
 answered on 01 Aug 2023
1 answer
132 views

Hi team,

Consider this dojo: https://dojo.telerik.com/uZOruWEY

The tooltip is initialised without the width property. In that case, on first mouse-in the text is not wrapped and seems the right behaviour for me.

On next mouse-in, the text is wrapped! 

 

Best regards,

Laurent.

Zornitsa
Telerik team
 answered on 28 Jul 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?