title: Kendo UI ToolTip on Icon
body: <p>I have button which has icon and I would like to attach tool tip when hovering over that icon. </p>
  
  <p>But it's not working see example below: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#primaryTextButton").kendoButton({
      icon: "filter-clear"
    });
    $("#textButton").kendoButton({
      icon: "filter-clear"
    });
  
    var tooltip = $("#example").kendoTooltip({
      filter: "button[tooltip] &gt; span",
      position: "top",
      content: function(e) {
        var target = e.target;
        if (target.parent().attr("tooltip")) {
          return target.parent().attr("tooltip");
        } else {
          return null;
        }
  
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;base href="https://demos.telerik.com/kendo-ui/button/index"&gt;
    &lt;style&gt;
      html {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
      }
    &lt;/style&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" /&gt;
    &lt;script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="example"&gt;
      &lt;div class="demo-section k-content"&gt;
        &lt;div&gt;
          &lt;h4&gt;Basic Button&lt;/h4&gt;
          &lt;p&gt;
            &lt;button id="primaryTextButton" class="k-primary" tooltip="Example of tool tip"&gt;Primary Button&lt;/button&gt;
            &lt;button id="textButton"&gt;Button&lt;/button&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>-----------UPDATE-----------------</strong></p>
  
  <p>Using HTML button works. Something with <strong>.k-button</strong> class.</p>
  
  <p>See below working example with HTML button:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;base href="https://demos.telerik.com/kendo-ui/button/index"&gt;
      &lt;style&gt;html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }&lt;/style&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" /&gt;
  
      &lt;script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"&gt;&lt;/script&gt;
      
  
  &lt;/head&gt;
  &lt;body&gt;
  
          &lt;div id="example"&gt;
              &lt;div class="demo-section k-content"&gt;
                  &lt;div&gt;
                      &lt;h4&gt;Basic Button&lt;/h4&gt;
                      &lt;p&gt;
      
         
         &lt;button id="primaryTextButton" tooltip="Example of tool tip!" &gt;Primary Button
         &lt;span class="k-icon k-i-info"&gt;
         &lt;/button&gt;
         &lt;/span&gt;
        
       
        
                          &lt;button id="textButton"&gt;Button
        &lt;span class="k-icon k-i-info"&gt;&lt;/span&gt;&lt;/button&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
  
               
  
              &lt;script&gt;
                  $(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");
                  }
    
                  });
              &lt;/script&gt;
  
              &lt;style&gt;
                  .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;
      }
              &lt;/style&gt;
          &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>