Dynamic Tooltip content
8 Jun 20238 minutes to read
The tooltip content can be changed dynamically using the Fetch request.
The Fetch request should be made within the beforeRender event of the tooltip. On every success, the corresponding retrieved data will be set to the content property of the tooltip.
When you hover over the icons, its respective data will be retrieved dynamically and then assigned to the tooltip’s content.
Refer to the following code snippet to change the tooltip content dynamically.
function onBeforeRender(args): void {
this.content = 'Loading...';
this.dataBind();
var fetchApi = new Fetch('./tooltip.json', 'GET');
fetchApi.send().then(
(result: any) => {
for (var i: number = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
this.content = result[i].Sports;
/* tslint:enable */
}
}
this.dataBind();
},
(reason: any) => {
this.content = reason.message;
this.dataBind();
});
}<div id="container">
<h2> Dynamic Tooltip content </h2>
<ejs-tooltip id="Tooltip" beforeRender="onBeforeRender" target=".circletool">
<e-content-template>
<div id="box" class="e-prevent-select">
<div id="1" class="circletool bold-01" style="display:inline-block"></div>
<div id="2" class="circletool italic" style="display:inline-block"></div>
<div id="3" class="circletool underline-02" style="display:inline-block"></div>
<div id="4" class="circletool cut-02" style="display:inline-block"></div>
<div id="5" class="circletool copy" style="display:inline-block"></div>
<div id="6" class="circletool paste" style="display:inline-block"></div>
</div>
</e-content-template>
</ejs-tooltip>
</div>
<script>
function onBeforeRender(args) {
this.content = 'Loading...';
this.dataBind();
var fetchApi = new ej.base.Fetch('./tooltip.json', 'GET');
fetchApi.send().then(
(result) => {
for (let i = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
this.content = result[i].Name;
}
}
this.dataBind();
},
(reason) => {
this.content = 'not found';
this.dataBind();
}
);
}
</script>
<style>
h2 {
text-align: center;
margin-bottom: 50px;
}
#box {
height: 80px;
position: relative;
text-align: center;
}
.circletool {
height: 35px;
width: 35px;
}
.underline-02 {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M16.163 34.044H31.84V37H16.163zM27.02 11h7.594v1.349h-1.127c-.62 0-1.058.24-1.393.755-.072.11-.233.484-.233 1.81v7.76c0 1.957-.197 3.507-.59 4.61-.414 1.137-1.22 2.123-2.405 2.928-1.175.802-2.79 1.204-4.78 1.204-2.16 0-3.84-.39-4.985-1.157a6.293 6.293 0 0 1-2.459-3.12c-.32-.892-.482-2.478-.482-4.854v-7.483c0-1.404-.239-1.88-.377-2.043-.248-.273-.672-.411-1.267-.411h-1.13V11h9.09v1.347h-1.144c-.653 0-1.094.184-1.354.569-.105.156-.279.598-.279 1.885v8.344c0 .723.063 1.563.198 2.5.13.897.354 1.592.676 2.069.32.48.788.878 1.392 1.192.613.314 1.378.473 2.293.473 1.176 0 2.237-.257 3.159-.767.899-.497 1.521-1.135 1.85-1.894.335-.798.503-2.2.503-4.167v-7.751c0-1.522-.219-1.893-.29-1.972-.282-.325-.721-.481-1.329-.481h-1.13V11z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.bold-01 {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M18.637 25.625v6.987h3.9c1.95 0 3.088 0 3.576-.162.812-.162 1.462-.488 1.95-.975.487-.488.812-1.3.812-2.275 0-.812-.163-1.463-.488-1.95-.325-.487-.974-.975-1.625-1.138-.974-.324-2.437-.487-4.875-.487zm0-10.4V21.4h4.713c2.112 0 1.138 0 1.625-.163.975-.162 1.625-.487 2.112-.974a2.691 2.691 0 0 0 .813-1.95c0-.813-.162-1.463-.65-1.95-.488-.488-1.3-.813-2.113-.975-.487 0 .163-.163-2.274-.163zM13.762 11h9.1c2.113 0 3.575.163 4.55.325.975.162 1.95.488 2.763 1.137.813.488 1.462 1.3 1.95 2.113.488.975.812 1.95.812 3.088 0 1.137-.324 2.274-.975 3.412-.65.975-1.625 1.787-2.6 2.275 1.626.487 2.763 1.3 3.575 2.438.813 1.137 1.3 2.437 1.3 3.9 0 1.137-.324 2.274-.812 3.412-.488 1.137-1.3 1.95-2.275 2.6a7.813 7.813 0 0 1-3.575 1.3c-.813-.163-.813 0-4.063 0h-9.75z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.italic {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M22.434 11h10.504l-.398 1.333-.269-.003c-.804 0-1.3.078-1.615.228-.513.232-.9.546-1.155.953-.28.431-.648 1.44-1.099 2.984l-4.417 15.298c-.484 1.71-.584 2.36-.584 2.606 0 .247.052.443.17.608.122.158.32.293.6.387.217.077.747.182 2.06.273l.404.027L26.249 37H15.063l.507-1.324.216-.009c1.248-.026 1.751-.142 1.96-.232.503-.197.865-.452 1.087-.772.391-.558.811-1.582 1.238-3.05l4.43-15.298c.367-1.235.548-2.174.548-2.789 0-.26-.053-.465-.181-.635-.123-.17-.327-.307-.59-.402-.204-.075-.688-.16-1.839-.16h-.437z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.cut-02 {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M21.941 27.375c-1.393-.028-3.037 1.193-3.48 2.814-.325 1.138-.325 1.952.163 2.927.163.488.65 1.139 1.464 1.301.813.163 1.463.163 2.276-.325.651-.488 1.301-1.3 1.627-2.276.325-1.139.325-1.952-.163-2.928-.325-.487-.65-1.138-1.464-1.463a2.14 2.14 0 0 0-.423-.05zm-6.645-8.838a4.983 4.983 0 0 0-1.55.269c-.65.325-1.302.813-1.464 1.626-.163.813 0 1.464.162 1.951.651.814 1.301 1.464 2.44 1.79 2.114.65 3.903-.326 4.228-1.627.488-.976 0-1.626-.163-2.114-.65-.813-1.3-1.464-2.439-1.789a6.847 6.847 0 0 0-1.214-.106zM31.47 12.3l-5.367 9.431.164.489L37 22.546l-2.602 1.464-8.781.812-1.952.976 1.301 2.603c.488.975.488 2.276.163 3.577-.813 2.602-3.252 4.228-5.366 3.578-2.277-.488-3.415-3.09-2.603-5.692.326-1.463 1.302-2.602 2.44-3.09l2.44-1.3-.977-1.79-2.439 1.3c-1.138.49-2.44.652-3.903.327-2.602-.814-4.228-2.928-3.577-5.204.65-2.277 3.415-3.415 6.016-2.765 1.302.325 2.44 1.301 3.09 2.44l1.138 2.114 1.79-.976 5.691-7.318z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.copy {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M26.612 20.392v3.361s-.064 2.208-2.504 2.016l-2.85.014v9.303a.38.38 0 0 0 .38.384h10.71c.211 0 .38-.17.38-.384h.003V20.772a.38.38 0 0 0-.38-.38zm-4.53-7.537v4.079s-.075 2.678-3.033 2.447l-3.46.015V30.68c0 .255.21.463.47.463h3.666v-5.763l4.768-5.054h.013l1.397-1.467h3.603v-5.544a.461.461 0 0 0-.463-.461zM21.23 11h7.813a2.321 2.321 0 0 1 2.323 2.318v5.545h.98l.003-.002c1.053 0 1.911.856 1.911 1.912v14.313A1.914 1.914 0 0 1 32.35 37H21.638a1.914 1.914 0 0 1-1.912-1.914V33H16.06a2.32 2.32 0 0 1-2.321-2.32V18.906l5.779-6.124h.023z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.paste {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M24.652 23.171v13.045l9.039-.016V25.67h-2.513v-2.499zm-.84-.78h7.368l3.326 3.28v11.313L23.812 37zm-10.318-8.845h2.463c-.005.033-.01.065-.01.097v1.217c0 .678.553 1.232 1.229 1.232h8.3c.68 0 1.23-.554 1.23-1.232v-1.217c0-.032-.008-.062-.01-.097h2.462v8.362H23.2v9.322h-9.706zm7.063-1.398v1.602h1.86v-1.602zM20.073 11h2.763c.37 0 .666.345.666.77v1.103h1.972a.77.77 0 0 1 .769.77v1.216c0 .425-.348.77-.77.77h-8.297a.77.77 0 0 1-.769-.77v-1.217a.77.77 0 0 1 .769-.77h2.228V11.77c0-.423.298-.769.67-.769z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
</style>public ActionResult MouseTrailing()
{
return View();
}