Kendo UI ToolTip для Icon - PullRequest
Новая
       26

Kendo UI ToolTip для Icon

0 голосов
/ 18 мая 2018

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

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

$(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 class.

См. Ниже рабочий пример с кнопкой 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 Ответ

0 голосов
/ 19 мая 2018

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

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

filter: "button[tooltip]"

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

...