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" /> |