Category / Section
Is it possible to use the Target API without title attribute in the target elements?
2 mins read
Yes, it is possible to use the Target API without title attribute in the target elements.
Target property specifies a selector for elements, within the container, for which the Tooltip will be displayed. By default, the Tooltip content is extracted from the title attribute of the target element.
If the title is not specified in the target elements, the content need to be change dynamically using content API as follows
Javascript
<div class="frame"> <table id="details table"> <tr> <th>EmployeeID</th> <th>Name</th> <th>Designation</th> </tr> <tr> <td>SF6089</td> <td><a href="#" class="e-info">Davolio</a></td> <td>Software Engineer</td> </tr> <tr> <td>SF6073</td> <td> <a href="#" class="e-info">Leverling </a> </td> <td>Tester</td> </tr> <tr> <td>SF6073</td> <td> <a href="#" class="e-info"> Suyama </a> </td> <td>Content Writer</td> </tr> <tr> <td>SF7896</td> <td> <a href="#" class="e-info"> Buchanan </a> </td> <td>Graphics Designer</td> </tr> </table> </div>
Defined the tooltip with the content and target API as “empty” and “e-info” respectively.
Javascript
<script type="text/javascript">
var target = $(".frame").ejTooltip(
{
target: ".e-info",
content: " ",
beforeOpen: "onOpen"
}).data("ejTooltip");
function onOpen(args) {
var emp = [
{ name: "Davolio", phone: "9712233456", birth: "12/08/1948", hired: "05/01/1992", photo: http://js.syncfusion.com/demos/web/images/Employee/7.png " },
{ name: "Leverling", phone: "9712567456", birth: "02/19/1952", hired: "08/14/1992", photo: " http://js.syncfusion.com/demos/web /images/Employee/6.png" },
{ name: "Suyama", phone: "9259233456", birth: "08/30/1963", hired: "04/01/1992", photo: " http://js.syncfusion.com/demos/web /images/Employee/3.png" },
{ name: "Buchanan", phone: "9983233456", birth: "03/04/1955", hired: "10/17/1993", photo: " http://js.syncfusion.com/demos/web /images/Employee/8.png" }, ];
for (i = 0; i < 4; i++) {
if (emp[i].name == args.event.target.innerText)
var content = '<div class="main"> <img src=' + emp[i].photo + ' class="logo"/><div class="des"><b>' + emp[i].name + '</b><br> Birth Date : ' + emp[i].birth + '<br> Hired Date : ' + emp[i].hired + '<br></div></div>';
}
//Setting the content for the Tooltip
target.setModel({ content: content });
}
</script>
Apply the following styles
CSS
<style type="text/css" class="cssStyles">
.frame {
width: 550px;
box-sizing: border-box;
border: none;
}
.frame table {
border-collapse: collapse;
width: 100%;
border: 1px solid grey;
}
.frame th, td {
text-align: left;
padding: 8px;
}
.logo {
float: left;
width: 80px;
height: 80px;
}
.frame tr:nth-child(even) {
background-color: #f2f2f2;
}
.frame th {
background-color: #4CAF50;
color: white;
}
.des {
width: 140px;
float: right;
line-height: 24px;
}
</style>
