This article describes the API migration process of Tooltip component from Essential JS 1 to Essential JS 2
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Position | Property: position <ej-tooltip id="tooltip" content="Tooltip Content"><e-tooltip-position><e-target horizontal="center" vertical="top" /><e-stem horizontal="center" vertical="bottom" /></e-tooltip-position></ej-tooltip> |
Property: position <ejs-tooltip position="TopCenter" /> |
| Animation | Property: animation <ej-tooltip id="tooltip" content="Tooltip Content" ><e-tooltip-animation effect="Fade" speed="1000"/></ej-tooltip> |
Property: animation List<Object> animation = new List<Object>(); animation.Add(new { open = new { effect = "FadeIn" }, close = new { effect = "fadeOut" } }); ViewBag.animation = animation; <ejs-tooltip id="tooltip" animation="ViewBag.animation" /> |
| Close Time Out | Property: autoCloseTimeout <ej-tooltip id="tooltip" content="Tooltip Content" auto-close-timeout="200" close-mode="Auto" /> |
Property: closeDelay, openDelay <ejs-tooltip id="tooltip" closeDelay="500" /> |
| Sticky Mode | Property : closeMode <ej-tooltip id="tooltip" content="Tooltip Content" close-mode="Sticky" /> |
Property: isSticky <ejs-tooltip id="tooltip" isSticky="true" position="TopCenter" /> |
| Offset from target | Not Applicable | Property: offsetX/ offsetY <ejs-tooltip id="tooltip" offsetX="10" offsetY="10" />; |
| Open mode of tooltip | Not Applicable | Property: opensOn <ejs-tooltip id="tooltip" opensOn="Click" /> |
| Enable disable the tip of tooltip | Not Applicable | Property: showTipPointer <ejs-tooltip id="tooltip" showTipPointer="true" /> |
| Hide | Method: hide() <ej-tooltip id="tooltip" content="Tooltip Content" /> var tooltipObj = $("#tooltip").ejTooltip("instance"); tooltipObj.hide(); |
Method: close() <ejs-tooltip id="tooltip" opensOn="Custom" content="Tooltip Content" /> var tooltipObj = document.getElementById('tooltip').ej2_instances[0]; tooltipObj.close(); |
| Show | Method: show() <ej-tooltip id="tooltip" content="Tooltip Content" /> var tooltipObj = $("#tooltip").ejTooltip("instance"); tooltipObj.show(); |
Method: open() <ejs-tooltip id="tooltip" opensOn="Custom" content="Tooltip Content" /> var tooltipObj = document.getElementById('tooltip').ej2_instances[0]; tooltipObj.open(); |
| Enable | Method: enable() <ej-tooltip id="tooltip" content="Tooltip Content" /> var tooltipObj = $("#tooltip").ejTooltip("instance"); tooltipObj.enable(); |
Method: destroy() <ejs-tooltip id="tooltip" content="Tooltip Content" /> var tooltipObj = document.getElementById('tooltip').ej2_instances[0]; tooltipObj.destroy(); |
| Close | Event: close <ej-tooltip id="tooltip" content="Tooltip Content" close="onClose" /> function onClose(args) { } |
Event: afterClose <ejs-tooltip id="tooltip" content="Tooltip Content" afterClose="onAfterClose" /> function onAfterClose() { } |
| Open | Event: open <ej-tooltip id="tooltip" content="Tooltip Content" open="onOpen" /> function onOpen(args) { } |
Event: afterOpen <ejs-tooltip id="tooltip" content="Tooltip Content" afterOpen="onAfterOpen" /> function onAfterOpen() { } |
| Before Collision | Not Applicable | Event: beforeCollision <ejs-tooltip id="tooltip" content="Tooltip Content" beforeCollision="onBeforeCollision" /> function onBeforeCollision() { } |
| Tracking | Event: tracking <ej-tooltip id="tooltip" content="Tooltip Content" tracking="onTracking" associate="mouse" /> function onTracking(args) { } |
Method: mouseTrail <ejs-tooltip id="tooltip" mouseTrail="true" /> |