Dynamic tooltip content in Vue Tooltip component

9 Jun 202310 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.

 onBeforeRender(args) {
    this.$refs.box.content = 'Loading...';
    this.$refs.box.dataBind();
    let fetchApi = new Fetch('./tooltip.json', 'GET');
    fetchApi.send().then(
        (result) => {
            for (let i = 0; i < result.length; i++) {
                if (result[i].Id == args.target.id) {
                    /* tslint:disable */
                    this.$refs.box.content = result[i].Name;
                    /* tslint:enable */
                }
            }
             this.$refs.box.dataBind();
        },
        (reason) => {
            this.$refs.box.content = reason.message;
            this.$refs.box.dataBind();
        });
}
<template>
   <div id='app'>
      <h2> Dynamic Tooltip content </h2>
      <ejs-tooltip id="box" ref='box' class="e-prevent-select" content='Loading...' target='.circletool' showTipPointer=false v-on:beforeRender='onBeforeRender'>
            <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>
        </ejs-tooltip>
    </div>
</template>
<style>
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import "node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  h2 {
    text-align: center;
    margin-bottom: 50px;
  }


  #box {
    height: 80px;
    position: relative;
    text-align: center;
  }
  .circletool {
    height: 35px;
    width: 35px;
  }
    .underline-02 {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9.4685001373291,8) scale(0.5,0.5) ' fill='%23000000' d='M3.4180251,28.362L22.712003,28.362 22.712003,32 3.4180251,32z M16.780006,0L26.126,0 26.126,1.6599731 24.738978,1.6599731C23.977016,1.6599731 23.436978,1.9559937 23.024991,2.5900269 22.936002,2.723999 22.738004,3.1849976 22.738004,4.8179932L22.738004,14.367981C22.738004,16.776001 22.495025,18.684021 22.011993,20.041992 21.501983,21.440979 20.50998,22.655029 19.051974,23.64502 17.605992,24.632996 15.618996,25.127014 13.168987,25.127014 10.511032,25.127014 8.4430419,24.646973 7.0330101,23.703003 5.6169964,22.76001 4.5989924,21.466003 4.0070134,19.862976 3.6140085,18.765991 3.4139965,16.812988 3.4139968,13.888977L3.4139968,4.6790161C3.4139965,2.9509888 3.1200517,2.3649902 2.950008,2.164978 2.6440392,1.8289795 2.1230438,1.6589966 1.3900127,1.6589966L0,1.6589966 0,0.0009765625 11.186996,0.0009765625 11.186996,1.6589966 9.7790385,1.6589966C8.9750233,1.6589966 8.4330321,1.8850098 8.1130257,2.3590088 7.9830209,2.5510254 7.7700082,3.0949707 7.7700082,4.6790161L7.7700082,14.948975C7.7700082,15.838989 7.8470345,16.872009 8.0129891,18.026001 8.1730233,19.130005 8.4490233,19.984985 8.8450194,20.572021 9.2380238,21.161987 9.8149882,21.653015 10.558029,22.039978 11.313033,22.426025 12.25401,22.622009 13.381023,22.622009 14.827982,22.622009 16.134009,22.304993 17.26798,21.677979 18.374974,21.065979 19.141025,20.280029 19.545016,19.346008 19.957978,18.364014 20.16501,16.638 20.16501,14.218018L20.16501,4.6779785C20.16501,2.8049927 19.894992,2.3480225 19.808017,2.2509766 19.459994,1.8510132 18.920016,1.6589966 18.171971,1.6589966L16.780006,1.6589966 16.780006,0.0009765625z' /%3e%3c/g%3e%3c/svg%3e ");
  }
  
  .bold-01 {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(8.00000047683716,8) scale(0.5,0.5) ' fill='%23000000' d='M14.847002,16.674988C13.794,16.674988 12.893998,16.690002 12.148999,16.719971 11.572,16.75 11.086,16.779968 10.686998,16.839966L10.686998,29.120972C12.543,29.495972 14.391001,29.690979 16.178998,29.690979 19.166,29.690979 21.461002,29.075989 23.007003,27.875977 24.536002,26.70697 25.311,25.221985 25.311,23.482971 25.311,22.328003 24.955001,21.203003 24.260001,20.138977 23.570003,19.088989 22.422,18.234009 20.847003,17.619995 19.247001,17.005005 17.230001,16.674988 14.847002,16.674988z M14.925001,2.2189941C13.375001,2.2189941,11.948999,2.3689575,10.686998,2.6539917L10.686998,14.140015C11.231,14.230957 11.836,14.289978 12.502999,14.334961 13.309999,14.394958 14.191,14.411011 15.154001,14.411011 17.586,14.411011 19.428001,14.185974 20.629001,13.705994 21.803001,13.255981 22.715003,12.550964 23.340003,11.620972 23.969001,10.677002 24.285003,9.6270142 24.285003,8.5169678 24.285003,6.7630005 23.513,5.322998 21.928001,4.0789795 20.350001,2.848999 17.991998,2.2189941 14.925001,2.2189941z M0,0L15.384001,0C18.208003,0 20.503001,0.19500732 22.209003,0.57000732 24.834003,1.125 26.874,2.1589966 28.273002,3.6140137 29.675002,5.0830078 30.387,6.7929688 30.387,8.6969604 30.387,10.33197 29.826003,11.815979 28.719001,13.120972 27.827003,14.170959 26.578002,14.994995 24.998,15.609985 26.888,16.089966 28.363998,16.765015 29.395003,17.648987 31.123,19.118958 31.999999,20.947998 31.999999,23.092957 31.999999,24.69696 31.426002,26.271973 30.295005,27.740967 29.161002,29.226013 27.591003,30.320984 25.622001,30.994995 23.683002,31.654968 20.702003,32 16.771001,32L0,32 0,30.469971 1.6809998,30.469971C3.0099984,30.469971 3.932999,30.110962 4.4949995,29.360962 4.7329985,29.045959 5.0229994,28.205994 5.0229994,26.106995L5.0229994,5.8779907C5.0229994,3.5839844 4.6679999,2.7290039 4.370999,2.4289551 3.776997,1.8289795 2.8939973,1.5289917 1.6809998,1.5289917L0,1.5289917z' /%3e%3c/g%3e%3c/svg%3e ");
  }
  
  .italic {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9,8) scale(0.5,0.5) ' fill='%23000000' d='M8,0L28,0 28,4 18,4 13.200012,28 20,28 20,32 0,32 0,28 9.4000244,28 14.400024,4 8,4z' /%3e%3c/g%3e%3c/svg%3e ");
  }
  
  .cut-02 {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(10.9177500107586,8) scale(0.499999940395362,0.499999940395362) ' fill='%23000000' d='M4.2434211,24.486929C3.1234166,24.487921 1.9864136,25.411931 1.5303855,26.803925 1.2234067,27.730923 1.2683899,28.699915 1.6553864,29.461907 1.9403927,30.015906 2.3644075,30.402913 2.8894059,30.568913 4.1804323,31.000903 5.6704354,30.001914 6.2174368,28.350916 6.756443,26.700928 6.1504502,25.008931 4.8604307,24.58393 4.6584334,24.51792 4.4514308,24.486929 4.2434211,24.486929z M16.081534,24.483923C15.874531,24.484931 15.66753,24.516928 15.465532,24.58393 14.173498,25.008931 13.569489,26.700928 14.107519,28.350916 14.655497,30.001914 16.144522,30.993914 17.436526,30.568913 17.961554,30.402913 18.385539,30.015906 18.670546,29.461907 19.057541,28.699915 19.099534,27.730923 18.795546,26.803925 18.338541,25.411931 17.202546,24.481925 16.081534,24.483923z M3.8974099,0L10.162478,12.849954 16.428523,0C16.830533,0.04499804 17.086548,0.76598901 15.822529,5.3079834 14.713511,9.3009687 12.318502,14.999957 11.838487,16.182951 13.408507,19.674946 12.730492,19.907948 14.43052,21.300934 15.510515,22.189938 17.086548,23.035929 17.874548,23.649926 18.846541,24.189932 19.656546,25.15392 20.062556,26.394928 20.481566,27.649914 20.40057,28.986916 19.860558,30.066916 19.422566,30.927905 18.706557,31.561905 17.854529,31.839905 15.865529,32.497908 13.771517,31.059908 12.844507,28.767909 12.253499,27.298918 12.61248,23.269938 12.232502,21.840941 11.977496,20.886933 11.025491,19.689946 10.162478,18.668938 9.2984566,19.689946 8.3464532,20.886933 8.0924525,21.840941 7.7134518,23.262934 8.0704493,27.298918 7.4794411,28.767909 6.5534382,31.059908 4.4594264,32.488905 2.4743941,31.839905 1.6173919,31.555909 0.90339658,30.927905 0.46540476,30.066916 -0.075615607,28.986916 -0.14760718,27.649914 0.26337645,26.386918 0.66837875,25.15392 1.4873858,24.189932 2.4573953,23.649926 3.2464034,23.035929 4.8154168,22.189938 5.8954434,21.300934 7.5944628,19.899937 6.9164481,19.674946 8.5144534,16.236952 8.0044703,14.999957 5.6114445,9.3009687 4.501419,5.3079834 3.2384078,0.76598901 3.495429,0.04499804 3.8974099,0z' /%3e%3c/g%3e%3c/svg%3e ");
  }
  
  .copy {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9.6852502822876,8) scale(0.5,0.5) ' fill='%23000000' d='M15.844,11.559021L15.844,15.695984C15.844,15.695984,15.764998,18.413025,12.761999,18.177002L9.253997,18.194031 9.253997,29.643982C9.253997,29.908997,9.4619972,30.117004,9.7219984,30.117004L22.904995,30.117004C23.163998,30.117004,23.371998,29.90802,23.371998,29.643982L23.374996,29.643982 23.374996,12.026978C23.374996,11.768982,23.166996,11.559021,22.906994,11.559021z M10.267996,2.28302L10.267996,7.3029785C10.267996,7.3029785,10.176001,10.598999,6.5360023,10.315002L2.2779993,10.333008 2.2779993,24.223022C2.2779995,24.536987,2.5360028,24.79303,2.8560022,24.79303L7.368003,24.79303 7.368003,17.700012 13.235998,11.47998 13.251997,11.47998 14.971998,9.6740112 19.405996,9.6740112 19.405996,2.8499756C19.405996,2.5369873,19.151999,2.28302,18.835997,2.28302z M9.2209999,0L18.837996,0C20.415999,0,21.695997,1.2789917,21.695997,2.8530273L21.695997,9.677002 22.902996,9.677002 22.905995,9.6749878C24.202999,9.6749878,25.258999,10.728027,25.258999,12.028015L25.258999,29.643982C25.258999,30.945984,24.202999,32,22.905995,32L9.7229978,32C8.4230033,32,7.3690025,30.944031,7.3690025,29.643982L7.3690025,27.078003 2.8570017,27.078003C1.2770001,27.078003,-1.3611906E-07,25.798035,1.4210855E-14,24.221985L1.4210855E-14,9.7319946 7.1129981,2.1940308 7.140998,2.1940308z' /%3e%3c/g%3e%3c/svg%3e ");
  }
  
  .paste {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23FFFFFF' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9,8) scale(0.5,0.5) ' fill='%23000000' d='M14,18L14,30 26,30 26,22 22,22 22,18z M12,16L24,16 24,18 26,18 26,20 28,20 28,32 12,32z M0,2L2,2 2,6 20,6 20,2 22,2 22,14 10,14 10,30 0,30z M8,0L14,0 14,2 16,2 16,4 6,4 6,2 8,2z' /%3e%3c/g%3e%3c/svg%3e ");
  }
</style>
<script>
import Vue from 'vue';
import { Fetch } from '@syncfusion/ej2-base';
import { TooltipPlugin } from '@syncfusion/ej2-vue-popups';
Vue.use(TooltipPlugin);

export default {
  data: function() {
    return {
    };
  },
  methods: {
        onBeforeRender(args) {
            this.$refs.box.content = 'Loading...';
            this.$refs.box.dataBind();
            let fetchApi = new Fetch('./tooltip.json', 'GET');
            fetchApi.send().then(
                (result) => {
                    for (let i = 0; i < result.length; i++) {
                        if (result[i].Id == args.target.id) {
                            /* tslint:disable */
                            this.$refs.box.content = result[i].Name;
                            /* tslint:enable */
                        }
                    }
                    this.$refs.box.dataBind();
                },
                (reason) => {
                    this.$refs.box.content = reason.message;
                    this.$refs.box.dataBind();
                });
        }
  }
}
</script>