Kendo UI ToolTip на иконке

У меня есть кнопка со значком, и я хочу прикрепить подсказку при наведении на эту иконку.

Но это не работает, см. Пример ниже:

$(document).ready(function() {
  $("#primaryTextButton").kendoButton({
    icon: "filter-clear"
  });
  $("#textButton").kendoButton({
    icon: "filter-clear"
  });

  var tooltip = $("#example").kendoTooltip({
    filter: "button[tooltip] > span",
    position: "top",
    content: function(e) {
      var target = e.target;
      if (target.parent().attr("tooltip")) {
        return target.parent().attr("tooltip");
      } else {
        return null;
      }

    }
  });
});
.demo-section p {
  margin: 0 0 30px;
  line-height: 50px;
}

.demo-section p .k-button {
  margin: 0 10px 0 0;
}

.k-primary {
  min-width: 150px;
}
<!DOCTYPE html>
<html>

<head>
  <base href="https://demos.telerik.com/kendo-ui/button/index">
  <style>
    html {
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" />
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="example">
    <div class="demo-section k-content">
      <div>
        <h4>Basic Button</h4>
        <p>
          <button id="primaryTextButton" class="k-primary" tooltip="Example of tool tip">Primary Button</button>
          <button id="textButton">Button</button>
        </p>
      </div>
    </div>
  </div>

</body>

</html>

-----------ОБНОВИТЬ-----------------

Использование кнопки HTML работает. Что-то с классом .k-button.

Смотрите ниже рабочий пример с кнопкой HTML:

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/button/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example">
            <div class="demo-section k-content">
                <div>
                    <h4>Basic Button</h4>
                    <p>
    
       
       <button id="primaryTextButton" tooltip="Example of tool tip!" >Primary Button
       <span class="k-icon k-i-info">
       </button>
       </span>
      
     
      
                        <button id="textButton">Button
      <span class="k-icon k-i-info"></span></button>
                    </p>
                </div>

             

            <script>
                $(document).ready(function () {
                    

                    $("#textButton").kendoButton({
                    
                    });

                  
                  var tooltip = $("#example").kendoTooltip({
                                filter: "span",            
                                position: "top",
                                content: function (e) {
                                    var target = e.target;                              
                                    if (target.parent().attr("tooltip")) {
                                        return target.parent().attr("tooltip");
                                    } else {
                                        return null;
                                    }
                
            },
   show: onShow,
                        hide: onHide,
        });
  
   function onShow(e) {
                    console.log("event :: show");
                }

                function onHide(e) {
                    console.log("event :: hide");
                }
  
                });
            </script>

            <style>
                .demo-section p {
                    margin: 0 0 30px;
                    line-height: 50px;
                }
                .demo-section p .k-button {
                    margin: 0 10px 0 0;
                }
                .k-primary {
                    min-width: 150px;
                }
    .k-icon{
     padding: 10px;
     font-size: 32px;
    }
            </style>
        </div>

</body>
</html>

Источник

1 ответ

Вы пытаетесь нацелиться на span элемент, в котором отображается значок, до того, как он будет на самом деле, поэтому ваш фильтр не работает.

Вы все еще можете показать всплывающую подсказку при наведении на кнопку, если вы измените свой фильтр на это:

filter: "button[tooltip]"

Очевидно, это предполагает, что вам НЕ НУЖНО показывать всплывающую подсказку только при наведении на ICON, но это соответствует вашим требованиям.:)

Источник
Другие вопросы по тегам