I have button which has icon and I would like to attach tool tip when hovering over that icon.
But it's not working see example below:
$(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>-----------UPDATE-----------------
Using HTML button works. Something with .k-button class.
See below working example with HTML button:
<!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>
You are trying to target the
spanelement that the icon is rendered in before it is actually there, thus your filter is failing.You can still show the tooltip on hover of the button if you change your filter to this:
filter: "button[tooltip]"Obviously, this assumes that you don't NEED to show the tooltip solely on hover of the ICON, but that's up to your requirements. :)