Search results

How To

Show tooltip on disabled elements and disable tooltip

By default, tooltips will not be displayed on disabled elements. However, you can enable this behavior by using the following steps:

  1. Add a disabled element like the button element into a div whose display style is set to inline-block.
  2. Set the pointer event as none for the disabled element (button) through CSS.
  3. Initialize the tooltip for outer div element that holds the disabled button element.
Source
Preview
index.js
index.html
index.css
var tooltipObj_1 = new ej.popups.Tooltip({
  content: 'Tooltip from disabled element'
});
tooltipObj_1.appendTo('#box');

//Initialize Button component
var buttonObj_1 = new ej.buttons.Button({
  disabled: true
});
//Render initialized Button component
buttonObj_1.appendTo('#disabledbutton');

//Initialize Button component
var button = new ej.buttons.Button();
//Render initialized Button component
button.appendTo('#tooltip');

//Initialize Tooltip component
var tooltipObj_2 = new ej.popups.Tooltip({
  //Set tooltip content
  content: 'Lets go green & Save Earth !!!'
});
//Render initialized Tooltip component
tooltipObj_2.appendTo('#tooltip');

var switchObj = new ej.buttons.Switch({
  value: 'USB tethering',
  checked: true,
  change: function(args) {
    if ((document.getElementById('checked')).checked) {
      tooltipObj_2.appendTo('#tooltip');
    } else {
      tooltipObj_2.destroy();
    }
  }
});
switchObj.appendTo('#checked');
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="box" style="display: inline-block;">
            <input type="button" id="disabledbutton" value="Disabled button">
        </div>
        <div style="position: relative;top: 75px;">
            <!-- Tooltip element -->
            <button id="tooltip">Show Tooltip</button>
            <div class="switchContainer">
                <label for="checked" style="padding: 0 25px 0 0">Enable Tooltip</label>
                <input id="checked" type="checkbox">
            </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;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 75px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#disabledbutton {
    pointer-events: none;
    font-size: 22px;
    padding: 10px;
}

.e-tooltip-wrap.e-popup .e-tip-content {
    padding: 10px;
    font-size: 14px;
}

#tooltip {
    position: relative;
    transform: translateX(-50%);
}

.switchContainer {
    vertical-align: sub;
    display: inline-block;
    position: relative;
    left: 3%;
}

Load HTML tags into tooltip

The Tooltip component loads HTML tags using the content template.

The HTML tags such as <div>, <span>, bold, italic, underline, etc., can be used. Style attributes can also be applied with HTML tags.

Here, Bold, Italic, Underline, and Anchor tags are used.

When using HTML elements as content to Tooltip make the content element display: none, then from the beforeRender event we can make the element visible again using below code.

    document.getElementById('content').style.display = 'block';
Source
Preview
index.js
index.html
index.css
var title = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    position: 'BottomCenter',
    opensOn: 'Hover',
    beforeRender: onBeforeRender,
    content: document.getElementById('tooltip')
});
title.appendTo('#Title');

var btn = new ej.buttons.Button();
btn.appendTo('#Title');

function onBeforeRender(){
    if(document.getElementById('tooltip')) {
        document.getElementById('tooltip').style.display = 'block';
    }
}
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="tooltip">
            <h2>HTML Tags</h2>
        Through templates, <b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content</div>
        <div id="tooltipContent">
          <div class="content">
             <button class="text" id="Title">HTML(With Title)</button>
          </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;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#tooltipContent table {
    margin: 0 auto;
}

#tooltip {
    display: none;
}

#tooltipContent {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 100px;
}

.text {
    text-transform: capitalize;
    width: 155px;
}

.header {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 12px;
    padding-bottom: 2px;
    margin: 4px -7px 7px -7px;
    padding-right: 5px;
    padding-left: 6px;
    font-weight: bold;
    height: 18px;
    border-bottom: 1px solid white;
}

.e-tooltip-css.e-tooltip-wrap .e-tip-content {
    padding: 0 10px 10px 10px;
}

Load HTML pages into tooltip

Tooltip loads HTML pages via HTML tags such as iframe, video, and map using the content property, which supports both string and HTML tags.

To load an iframe element in tooltip, set the required iframe in the content of tooltip while initializing the tooltip component. Refer to the following code.

content: '<iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>

Use the following steps to render ej2-map in tooltip:

  1. Initialize the map component and create an element. After initialization, append the map object to the element.
  2. Set the rendered map element to the content of tooltip component. Refer to the following sample.
Source
Preview
index.js
index.html
index.css
//World map data
//Render video Button
var Video = new ej.buttons.Button({
    cssClass: 'e-outline',
    isPrimary: true
});
Video.appendTo('#Video');
//Render iframe Button
var iframeContent = new ej.buttons.Button({
    cssClass: 'e-outline',
    isPrimary: true
});
iframeContent.appendTo('#iframeContent');
//Render map Button
var MapButton = new ej.buttons.Button({
    cssClass: 'e-outline',
    isPrimary: true
});
MapButton.appendTo('#Map');
//Render video Tooltip
var video = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: '<video width="320" height="155" controls><source src="https://www.youtube.com/watch?v=dVTVKVNgo2g " type="video/mp4"></video>',
    position: 'BottomCenter',
    opensOn: 'Click'
});
video.appendTo('#Video');
//Render iframe Tooltip
var TooltipContent = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: '<iframe src="https://www.syncfusion.com/products/essential-js2" id="tooltipFrame"></iframe>',
    position: 'BottomCenter',
    opensOn: 'Click',
    width: '350',
    height: '250'
});
TooltipContent.appendTo('#iframeContent');
exports.dafaultData = [{
        "drillColor": '#C13664',
        "continent": "North America",
        "CategoryName": "Books",
        "Sales": 10882,
        'color': '#71B081'
    },
    {
        "drillColor": '#9C3367',
        "continent": "South America",
        "CategoryName": "Books",
        "Sales": 13776,
        'color': '#5A9A77'
    },
    {
        "drillColor": '#80306A',
        "continent": "Africa",
        "CategoryName": "Books",
        "Sales": 18718.0,
        'color': '#498770'
    },
    {
        "drillColor": '#622D6C',
        "continent": "Europe",
        "CategoryName": "Books",
        "Sales": 3746,
        'color': '#39776C'
    },
    {
        "drillColor": '#462A6D',
        "continent": "Asia",
        "CategoryName": "Books",
        "Sales": 10688,
        'color': '#266665'
    },
    {
        "drillColor": '#2A2870',
        "continent": "Australia",
        "CategoryName": "Books",
        "Sales": 30716,
        'color': '#124F5E '
    }
];
//Render Map component
var maps = new ej.maps.Maps({
    zoomSettings: {
        enable: false
    },
    legendSettings: {
        visible: false
    },
    width: '336',
    height: '235',
    layers: [{
        shapeData: new ej.maps.MapAjax('./map_data.json'),
        shapePropertyPath: 'continent',
        shapeDataPath: 'continent',
        dataSource: dafaultData,
        shapeSettings: {
            autofill: true
        }
    }, ],
});
//Create an element and append initialized map object to the created element
var map = document.createElement("div");
maps.appendTo(map);
//Render map Tooltip
var mapTooltip = new ej.popups.Tooltip({
    opensOn: 'Click',
    position: 'BottomCenter',
    cssClass: 'mapTooltip'
    content: map,
    width: '350',
    height: '250'
});
mapTooltip.appendTo('#Map');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for ListView UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="http://npmci.syncfusion.com/packages/development/ej2-buttons/styles/material.css" rel="stylesheet">
    
    <link href="http://npmci.syncfusion.com/packages/development/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="http://npmci.syncfusion.com/packages/development/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="http://npmci.syncfusion.com/packages/development/ej2-maps/styles/material.css" rel="stylesheet">
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="tooltipContent">
            <div class="content">
                <!-- iframe element -->
                <button class="text" id="iframeContent">Embedded Iframe</button>
            </div>
            <div class="content">
                <!-- map element -->
                <button class="text" id="Map">Map</button>
            </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;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    top: 45%;
    left: 45%;
}

#tooltipContent {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 65px 10px;
}

.content {
    display: inline-block;
    width: 49%;
}

#tooltipFrame {
    width: 332px;
    height: 233px;
}

.content button {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.e-tooltip-wrap.e-popup.mapTooltip .e-tip-content {
    padding-top: 5px;
}

Define tooltip open mode property

The open mode property of tooltip can be defined on a target that is hovering, focusing, or clicking. Tooltip component have the following types of open mode:

* Auto
* Hover
* Click
* Focus
* Custom

** Auto **

Tooltip appears when you hover over the target or when the target element receives the focus.

** Hover **

Tooltip appears when you hover over the target.

** Click **

Tooltip appears when you click a target element.

** Focus **

Tooltip appears when you focus (say through tab key) on a target element.

** Custom **

Tooltip is not triggered by any default action. So, bind your own events and use either open or close public methods.

Source
Preview
index.js
index.html
index.css
var tooltiphover = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });
tooltiphover.appendTo('#tooltiphover');

var tooltipclick = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });
tooltipclick.appendTo('#tooltipclick');

var tooltipcustom = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });
tooltipcustom.appendTo('#tooltipcustom');

var Mode = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });
Mode.appendTo('#Mode');

var open = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });
open.appendTo('#openMode');

//Render Tooltip component

var hoverTooltip = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    opensOn: 'Hover',
    content: 'Tooltip from hover'
});
hoverTooltip.appendTo('#tooltiphover');

var clickTooltip = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    opensOn: 'Click',
    content: 'Tooltip from click'
});
clickTooltip.appendTo('#tooltipclick');

var focusTooltip = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    opensOn: 'Focus',
    content: 'Tooltip from focus'
});
focusTooltip.appendTo('#focus');

var customTooltip = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    opensOn: 'Custom',
    content: 'Tooltip from custom mode'
});
customTooltip.appendTo('#tooltipcustom');

var openMode = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    openDelay: 1000,
    closeDelay: 1000,
    position: 'BottomCenter',
    content: 'Opens and closes Tooltip with delay of <i>1000 milliseconds</i>'
});
openMode.appendTo('#openMode');

var mode = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'Click close icon to close me',
    position: 'BottomCenter',
    isSticky: true
});
mode.appendTo('#Mode');

document.getElementById('tooltipcustom').addEventListener("dblclick", function () {
    if (this.getAttribute("data-tooltip-id")) {
        customTooltip.close();
    } else {
        customTooltip.open(this);
    }
});
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="showTooltip">
            <div id="first">
                <button class="blocks" id="tooltiphover">Hover me!(Default)</button>
                <button class="blocks" id="tooltipclick">Click me!</button>
            </div>
            <br><br>
            <div id="second">
                <button class="blocks" id="Mode">Sticky Mode</button>
                <button class="blocks" id="openMode">Tooltip with delay</button>
            </div>
            <br><br>
            <div id="third">
              <button class="blocks" id="tooltipcustom">Double click on me!</button>
                <div id="textbox" class="e-float-input blocks">
                <input id="focus" type="text" placeholder="Focus and blur">
                </div>
            </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;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#container {
  width: 100%;
}

#textbox {
  display: inline-block;
  top: -3px;
}
.blocks {
  margin: 0 10px 0 10px;
  text-transform: none;
  width: 168px;
}

#showTooltip {
  display: table;
  padding-top: 40px;
  margin: 0 auto;
}

#focus {
  border: 1px solid #ff4081;
  text-align: center;
  height: 31px;
  width: 168px;
}
/* csslint ignore:start */

::placeholder {
  color: #ff4081;
}

/* csslint ignore:end */

Customize tooltip

The arrow of the tooltip can be customized as needed by customizing CSS in the sample-side. The EJ2 tooltip component is achieved through CSS3 format and positioned the tip arrow according to the tooltip positions like TopCenter, BottomLeft, RightTop, and more.

Here, the tip arrow is customized as Curved tooltip and Bubble tooltip.

** Curved tip **

The content for the tip pointer arrow has been added. To customize the curved tip arrow, override the following CSS class of tip arrow.

    let tooltip: Tooltip = new Tooltip({
    cssClass: 'curvetips e-tooltip-css',
    content: 'Tooltip arrow customized',
});
tooltip.appendTo('#target');
      .e-arrow-tip-outer.e-tip-bottom,
      .e-arrow-tip-outer.e-tip-top {
           border-left: none !important;
           border-right: none !important;
           border-top: none !important;
      }
      .e-arrow-tip.e-tip-top {
           transform: rotate(170deg);
      }

** Bubble tip **

The two divs(inner div and outer div) have been added to achieve the bubble tip arrow. To customize the bubble tip arrow, override the following CSS class of tip arrow.

    let bubble: Tooltip = new Tooltip({
    cssClass: 'bubbletip e-tooltip-css',
    position: 'TopRight',
    content: 'Tooltip arrow customized as balloon tip'
});
bubble.appendTo('#bubbletip');
    .e-arrow-tip-outer.e-tip-bottom, .e-arrow-tip-outer.e-tip-top
      {
         border-radius: 50px;
         height: 10px;
         width: 10px;
      }

      .e-arrow-tip-inner.e-tip-bottom, .e-arrow-tip-inner.e-tip-top
        {
         border-radius: 50px;
         height: 10px;
         width: 10px;
        }

These tip arrow customizations have been achieved through CSS changes in the sample level. The tooltip position can be changed by using the radio button click event.

The arrow tip pointer can also be disabled by using the showTipPointer property in a tooltip.

Source
Preview
index.js
index.html
index.css
var tooltip = new ej.popups.Tooltip({
   cssClass: 'curvetips e-tooltip-css',
   content: 'Tooltip arrow customized',
});
tooltip.appendTo('#target');

var curvebutton = new ej.buttons.Button();
curvebutton.appendTo('#target');

var tipbutton = new ej.buttons.Button();
tipbutton.appendTo('#tooltip');

var bubblebutton = new ej.buttons.Button();
bubblebutton.appendTo('#bubbletip');

var radiobutton = new ej.buttons.RadioButton({ label: 'TopCenter', name: 'default', value: 'TopCenter', checked: true, change: onChange});

// Render initialized RadioButton.
radiobutton.appendTo('#element1');

var radiobutton = new ej.buttons.RadioButton({ label: 'BottomLeft', name: 'default', value: 'BottomLeft',  change: onChange});
radiobutton.appendTo('#element2');

var tippointer = new ej.popups.Tooltip({
    cssClass: 'pointertip e-tooltip-css',
    mouseTrail: true,
    content: 'Disabled tooltip pointer',
    showTipPointer: false
});
tippointer.appendTo('#tooltip');

var bubble = new ej.popups.Tooltip({
    cssClass: 'bubbletip e-tooltip-css',
    position: 'TopRight',
    content: 'Tooltip arrow customized as balloon tip'
});
bubble.appendTo('#bubbletip');

var radiobutton = new ej.buttons.RadioButton({ label: 'BottomLeft', name: 'position', value: 'BottomLeft', change: onChanged});

// Render initialized RadioButton.
radiobutton.appendTo('#radio1');

var radiobutton = new ej.buttons.RadioButton({ label: 'TopRight', name: 'position', value: 'TopRight',  checked: true, change: onChanged});
radiobutton.appendTo('#radio2');

function onChange(args) {
    tooltip.position = args.value;
    tooltip.dataBind();
}
function onChanged(args) {
    bubble.position = args.value;
    if(bubble.position == 'BottomLeft'){
      bubble.offsetY = -30;
    } else {
      bubble.offsetY = 0;
    }
    bubble.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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="customization" class="customTipContainer">
            <button id="target">
                Customized Tip Arrow
            </button>
            <div id="positions">
                <ul>
                    <li>
                        <input type="radio" id="element1">
                    </li>
                    <li>
                        <input type="radio" id="element2">
                    </li>
                </ul>
            </div>
        </div>
        <div id="balloon" class="customTipContainer">
            <button id="bubbletip">
                Bubble Tip Arrow
            </button>
            <div id="btn">
                <ul>
                    <li>
                        <input type="radio" id="radio1">
                    </li>
                    <li>
                        <input type="radio" id="radio2">
                    </li>
                </ul>
            </div>
        </div>
        <div id="disabledContainer" class="customTipContainer">
            <button id="tooltip">
                Disabled Tip Arrow
            </button>
        </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;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#bubbletip {
  border-color: #d2a679;
}

#target {
  border-color: #e86238;
}

li {
  list-style: none;
}

.e-radio-wrapper {
  margin-top: 18px;
}

#target,
#bubbletip,
#tooltip {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  text-align: center;
  top: -17px;
  margin-bottom: 40px;
}

/* csslint ignore:start */

@font-face {
  font-family: "tip";
  src: url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.tff") format("truetype"), url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.woff") format("woff"), url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.eot") format("eot"), url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.svg?#tip") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* csslint ignore:end */

/* csslint ignore:start */

#container {
  width: 100%;
}

.customTipContainer {
  width: 400px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 50px;
}

#disabledContainer {
  margin-top: 25px;
}

.pointertip.e-tooltip-wrap .e-tip-content,
.curvetips.e-tooltip-wrap .e-tip-content {
  color: white;
}

.pointertip.e-tooltip-wrap.e-popup {
  background-color: #80180d;
  border: 3px solid #ff9999;
}

.curvetips .e-arrow-tip.e-tip-top {
  margin-left: -20px;
  top: -16px;
  transform: rotate(177deg);
  left: 50px;
}

.curvetips.e-tooltip-wrap {
  padding: 17px;
  border-radius: 5px;
}

.curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom:before,
.curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top:before {
  font-family: "tip" !important;
  speak-as: none;
  font-size: 21px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e700";
  color: #e86238;
}

.curvetips.e-tooltip-wrap.e-popup {
  background: #e86238;
  border: none;
}

.curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom,
.curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
  border-left: none;
  border-right: none;
  border-top: none;
}

.curvetips.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom:before,
.curvetips.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top:before {
  content: none;
}

.curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom,
.curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
  top: -1px;
}

.curvetips.e-tooltip-wrap .e-arrow-tip.e-tip-bottom,
.curvetips.e-tooltip-wrap .e-arrow-tip.e-tip-top {
  position: absolute;
  height: 18px;
  width: 28px;
}

#positions {
  display: inline-block;
}

#btn {
  display: inline-block;
}

#target .e-tip-content {
  padding: 0px;
}

.bubbletip.e-tooltip-wrap {
  padding: 8px;
}

.bubbletip.e-tooltip-wrap .e-tip-content {
  border-radius: 50%;
  text-align: center;
  color: white;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
  height: 40px;
  width: 50px;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
  height: 40px;
  width: 40px;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
  height: 12px;
  width: 20px;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
  height: 12px;
  width: 20px;
}

.bubbletip.e-tooltip-wrap.e-popup {
  border: 5px solid #dfccad;
  background-color: #7b5e32;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
  height: 10px;
  width: 10px;
  border: 1px solid #dfccad;
  background-color: #7b5e32;
  border-radius: 50px;
  margin-top: 20px;
  margin-right: 20px;
}

.e-arrow-tip.e-tip-top {
  margin-left: 60px;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
  border: 1px solid #dfccad;
  border-radius: 50px;
  background-color: #7b5e32;
  width: 10px;
  height: 10px;
  margin-left: 20px;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
  border-bottom: 6px solid transparent;
  border-right: 20px solid #dfccad;
  border-top: 6px solid transparent;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
  border-bottom: 6px solid transparent;
  border-left: 20px solid #dfccad;
  border-top: 6px solid transparent;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
  margin-top: -2px;
  margin-left: 8px;
  content: none;
  top: 1px !important;
  border: 2px solid #dfccad;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: #7b5e32;
}

.bubbletip .e-arrow-tip.e-tip-top {
  left: 44px !important;
  top: -19px !important;
}

.bubbletip .e-arrow-tip.e-tip-bottom {
  top: 88.9% !important;
  left: 4px !important;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
  top: 10px !important;
  border: 2px solid #dfccad;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: #7b5e32;
}

.bubbletip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top:before {
  content: None;
}

.bubbletip.e-tooltip-wrap .e-tip-content {
  border-radius: inherit;
}

.bubbletip.e-tooltip-wrap.bubbletip {
  width: 150px !important;
  border-radius: 50%;
}

/* csslint ignore:end */

Display tooltip on SVG and canvas elements

Tooltip can be displayed on both SVG and Canvas elements. You can directly attach the <svg> or <canvas> elements to show tooltips on data visualization elements.

** SVG **

Create the SVG square element and refer to the following code snippet to render the tooltip on SVG square.

let square: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'SVG Square',
    target: '#square
});
square.appendTo('#box');

** Canvas **

Create the canvas circle element and refer to the following code snippet to render the tooltip on Canvas circle.

let circle: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'Canvas Circle',
    target: '#circle'
});
circle.appendTo('#box');
Source
Preview
index.js
index.html
index.css
//Render Tooltip component
var square = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'SVG Square',
    target: '#square'
});
square.appendTo('#box');

var ellipse = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'SVG Ellipse',
    target: '#ellipse'
});
ellipse.appendTo('#box');

var polyline = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'SVG Polyline',
    target: '#polyline'
});
polyline.appendTo('#box');

var circle = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'Canvas Circle',
    target: '#circle'
});
circle.appendTo('#box');

var triangle = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: 'Canvas Triangle',
    target: '#triangle'
});

triangle.appendTo('#box');
var canvas = document.getElementById('triangle');
var context;
if (canvas.getContext) {
    context = canvas.getContext('2d');
    context.beginPath();
    context.moveTo(0, 50);
    context.lineTo(100, 50);
    context.lineTo(50, 0);
    context.fillStyle = "#FDA600";
    context.fill();
}
canvas = document.getElementById('circle');
context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#0450C2';
context.fill();
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="box" class="e-prevent-select">
            <div class="circletool" id="rectShape" style="left:1%;top:10%">
              <svg>
                <rect id="square" class="shape" x="50" y="20" width="50" height="50" style="fill:#FDA600;stroke:none;stroke-width:5;stroke-opacity:0.9"/>
              </svg>
            </div>
            <div class="circletool" id="ellipseShape" style="top:65%;">
              <svg>
                <ellipse id="ellipse" class="shape" cx="100" cy="50" rx="20" ry="40" style="fill:#0450C2;stroke:none;stroke-width:2"/>
              </svg>
            </div>
            <div class="circletool" id="polyShape" style="top:25%;left:40%">
              <svg>
                <polyline id="polyline" class="shape" points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:#ffffff;stroke:#0450C2;stroke-width:4"/>
              </svg>
            </div>
            <div class="circletool" id="circleShape" style="top:16%;left:72%">
              <canvas id="circle" class="shape" width="60" height="60"></canvas>
            </div>
            <div class="circletool" id="triShape" style="top:73%;left:76%">
              <canvas id="triangle" class="shape" width="100" height="50"></canvas>
            </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;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

@media (max-width: 500px) {
  #rectShape {
    /* csslint ignore:start */
    left: -11% !important;
    /* csslint ignore:end */
  }
  #ellipseShape {
    /* csslint ignore:start */
    left: -20% !important;
    /* csslint ignore:end */
  }
  #polyShape {
    /* csslint ignore:start */
    left: 28% !important;
    /* csslint ignore:end */
  }
  #circleShape {
    /* csslint ignore:start */
    left: 68% !important;
    /* csslint ignore:end */
  }
  #triShape {
    /* csslint ignore:start */
    left: 65% !important;
    /* csslint ignore:end */
  }
}

@media (min-width: 500px) and (max-width: 600px) {
  #triShape {
    /* csslint ignore:start */
    left: 70% !important;
    /* csslint ignore:end */
  }
}

#container {
  width: 80%;
  margin: 0 auto;
}

.e-tooltip-css {
  filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.25));
}

#control-container {
  /* csslint ignore:start */
  padding: 0 !important;
  /* csslint ignore:end */
}

#box {
  border: 1px solid #dddddd;
  background: #ffffff;
  box-sizing: border-box;
  height: 320px;
  position: relative;
}

.circletool {
  position: absolute;
}

Create and show tooltip on multiple targets

Tooltip can be created and shown on multiple targets within a container by defining the specific target elements to the target property. So, the tooltip is initialized only on matched targets within a container.

In this case, the tooltip content is assigned from the title attribute of the target element.

import { Tooltip } from '@syncfusion/ej2-popups';

let tooltip: Tooltip = new Tooltip({
    position: 'RightCenter'
});
tooltip.appendTo('#uname); // Here we have appended the target to the element.
Source
Preview
index.js
index.html
index.css
var button1 = new ej.buttons.Button();
button1.appendTo('#sample');
var button2 = new ej.buttons.Button();
button2.appendTo('#clear');
var tooltip1 = new ej.popups.Tooltip({
    position: 'RightCenter'
});
tooltip1.appendTo('#uname');
var tooltip2 = new ej.popups.Tooltip({
    position: 'RightCenter'
});
tooltip2.appendTo('#mail');
var tooltip3 = new ej.popups.Tooltip({
    position: 'RightCenter'
});
tooltip3.appendTo('#pwd');
var tooltip4 = new ej.popups.Tooltip({
    position: 'RightCenter'
});
tooltip4.appendTo('#cpwd');
document.getElementById('sample').addEventListener('click', function(){
  var name = document.getElementById('uname').value;
  var pwd = document.getElementById('pwd').value;
  var cpwd = document.getElementById('cpwd').value;
  if(name.length > 0 & name.length < 4){
    document.getElementById('uname').title = 'Required Minimum 4 Characters';
    document.getElementById('uname').style.backgroundColor = 'red';
    var target = document.getElementById('uname');
    tooltip1.open(target);
  } else {
   
     document.getElementById('uname').style.backgroundColor = 'white';
  }
  if(pwd !== '' && pwd.length < 8){
     document.getElementById('pwd').title = 'Required Minimum 8 Characters';
    document.getElementById('pwd').style.backgroundColor = 'red';
    var pwdtarget = document.getElementById('pwd');
    tooltip3.open(pwdtarget);
  } else {
     document.getElementById('pwd').style.backgroundColor = 'white';
  }
  if(name.length >= 4 && pwd !== '' && pwd.length >= 8  &&  pwd == cpwd ){ 
     alert('Form Submitted');
  } else {
     alert('Details are not Valid');
  }
})
document.getElementById('clear').addEventListener('click', function(){
  document.getElementById('uname').style.backgroundColor = 'white';
  document.getElementById('pwd').style.backgroundColor = 'white';
  var target = document.getElementById('uname');
  tooltip1.close(target);
  document.getElementById('uname').title = 'Please enter your name';
  var pwdtarget = document.getElementById('pwd');
  tooltip3.close(pwdtarget);
});
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
      <form id="details" role="form">
        <div id="user">
          <div class="info">User Name:</div>
          <div class="inputs"><input type="text" id="uname" class="e-info e-input" name="firstname" title="Please enter your name"></div>
        </div>
        <br>
        <div>
          <div class="info">Email Address:</div>
          <div class="inputs"><input type="text" id="mail" class="e-info e-input" name="email" title="Enter a valid email address"></div>
        </div>
        <br>
        <div>
          <div class="info">Password:</div>
          <div class="inputs"><input id="pwd" type="password" class="e-info e-input" name="password" title="Be at least 8 characters length"></div>
        </div>
        <br>
        <div>
          <div class="info">Confirm Password:</div>
          <div class="inputs"><input id="cpwd" type="password" class="e-info e-input" name="Cpwd" title="Re-enter your password"></div>
        </div>
        <br>
        <div class="btn">
          <input id="sample" type="button" value="Submit">
          <input id="clear" type="reset" value="Reset">
        </div>
      </form>
    </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;
    border: 1px solid #ddd;
  }

  #loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }

#details .info {
    font-weight: bold;
    width: 165px;
    display: inline-block;
    margin-left: 10px;
}
#details .inputs {
    display: inline-block;
}
#details .btn{
  margin-top: 10px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
}
#details #sample{
  margin-left:10px;
}
#details #clear{
  margin-left:10px;
}
#details {
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
}

Change tooltip content dynamically

The tooltip content can be changed dynamically using the AJAX request.

The AJAX 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: TooltipEventArgs): void {
    this.content = 'Loading...';
    this.dataBind();
    let ajax: Ajax = new Ajax('./tooltip.json', 'GET', true);
    ajax.send().then(
        (result: any) => {
            result = JSON.parse(result);
            for (let 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();
        });
}
Source
Preview
index.js
index.html
index.css
var tooltip = new ej.popups.Tooltip({
    content: 'Loading...',
    target: '.circletool',
    showTipPointer: false,
    beforeRender: onBeforeRender,
});

tooltip.appendTo('#box');
function onBeforeRender(args) { 
    this.content = 'Loading...';
    this.dataBind();
    var ajax = new ej.base.Ajax('./tooltip.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.id) {
                    /* tslint:disable */
                    this.content = result[i].Name;
                    /* tslint:enable */
                }
            }
            this.dataBind();
        },
        (reason) => {
            this.content = reason.message;
            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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
      <h2> Dynamic Tooltip content </h2>
      <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>
      </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;
  margin-top: 100px;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

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%;
}