A text or a piece of information assigned to the Tooltip’s content property will be displayed as the main text stream of the Tooltip.
It can be a string or a template content. If the content property is not provided with any specific value, then it takes the value
assigned to the title attribute of the target element on which the Tooltip was initialized. The content can also dynamically be
assigned to the Tooltip via AJAX.
Any text or image can be added to the Tooltip, by default. To customize the Tooltip layout or to create your own visualized element on the Tooltip, template can be used.
Refer to the following code example to add formatted HTML content to the Tooltip.
var tooltipContent = document.createElement("div");
tooltipContent.id = 'tooltipContent';
tooltipContent.innerHTML = "<p><strong>Environmentally friendly</strong> or <strong>environment-friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly, and green)</i> are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</p>";
var tooltip = new ej.popups.Tooltip({
content: tooltipContent
});
tooltip.appendTo('#target');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Tooltip</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<p>A green home is a type of house designed to be
<a id="target">
<u>environmentally friendly</u>
</a> and sustainable. And also focuses on the efficient use of "energy, water, and building materials." As green homes
have become more prevalent we have also seen the emergence of green affordable housing.
</p>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>The Tooltip content can be dynamically loaded by making use of the AJAX call. The AJAX request is usually made within the beforeRender
event of the Tooltip, and then the Tooltip’s content is assigned the value retrieved on it’s success.
var tooltip = new ej.popups.Tooltip({
content: 'Loading...',
target: '.target',
position: 'RightCenter',
beforeRender: onBeforeRender
});
tooltip.appendTo('#targetContainer');
function onBeforeRender(args) {
var ajax = new ej.base.Ajax('./tooltipdata.json', 'GET', true);
ajax.send().then((result) => {
result = JSON.parse(result);
for (var i = 0; i < result.length; i++) {
if (result[i].Id === args.target.getAttribute('data-content')) {
this.content = "<div class='contentWrap'><div>" + result[i].Sports + "</div></div>";
}
}
this.dataBind();
}, (reason) => {
this.content = reason;
this.dataBind();
});
}<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Tooltip</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h4>National Sports</h4>
<div id="targetContainer" class="e-prevent-select">
<div id="countrylist">
<ul>
<li class="target" title="1"><span>Australia</span></li>
<li class="target" title="2"><span>Bhutan</span></li>
<li class="target" title="3"><span>China</span></li>
<li class="target" title="4"><span>Cuba</span></li>
<li class="target" title="5"><span>India</span></li>
<li class="target" title="6"><span>Switzerland</span></li>
<li class="target" title="7"><span>United States</span></li>
</ul>
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>#container {
visibility: hidden;
width: 350px;
position: relative;
left: 50%;
transform: translateX(-25%);
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#countrylist {
padding: 5px;
}
#countrylist ul {
border: 1px solid #c4c4c4;
box-sizing: border-box;
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
#countrylist li {
padding: 10px;
}
#countrylist li:hover {
background-color: #ececec;
}
.contentWrap {
line-height: 16px;
padding: 3px 0;
}