Tooltip Positioning in Tooltip Control
21 Dec 202214 minutes to read
Tooltips can be attached to 12 static locations around the target. On initializing the Tooltip, you can set the position property with any one of the following values:
TopLeftTopCenterTopRightBottomLeftBottomCenterBottomRightLeftTopLeftCenterLeftBottomRightTopRightCenterRightBottom
NOTE
By default, Tooltip is placed at the
TopCenterof the target element.
<ejs-tooltip id="Tooltip" position="TopCenter" content="Tooltip content">
<e-content-template>
<div id='container'> <div id="content" title="Tooltip content"> <span>Show tooltip</span> <select id="positions" class="form-control" onchange="onChange(this)"> <option value="TopLeft">Top Left</option> <option value="TopCenter" selected="">Top Center</option> <option value="TopRight">Top Right</option> <option value="BottomLeft">Bottom Left</option> <option value="BottomCenter">Bottom Center</option> <option value="BottomRight">Bottom Right</option> <option value="LeftTop">Left Top</option> <option value="LeftCenter">Left Center</option> <option value="LeftBottom">Left Bottom</option> <option value="RightTop">Right Top</option> <option value="RightCenter">Right Center</option> <option value="RightBottom">Right Bottom</option> </select></div> </div>
</e-content-template>
</ejs-tooltip>
<style>
#target {
background-color: #ececec;
border: 1px solid #c8c8c8;
box-sizing: border-box;
margin: 70px auto;
padding: 20px;
width: 200px;
}
/* csslint ignore:start */
.customtip.e-tooltip-wrap {
padding: 4px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
height: 20px;
width: 12px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
height: 20px;
width: 12px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
height: 12px;
width: 20px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
height: 12px;
width: 20px;
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 20px solid #616161;
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
border-bottom: 20px solid #616161;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
border-bottom: 6px solid transparent;
border-right: 20px solid #616161;
border-top: 6px solid transparent;
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
border-bottom: 6px solid transparent;
border-left: 20px solid #616161;
border-top: 6px solid transparent;
}
</style>
<script>
var tooltip;
window.onload = function () {
tooltip = document.getElementById('Tooltip').ej2_instances[0];
}
function onChange(args) {
tooltip.position = args.value;
}
</script>public ActionResult TooltipAnimation()
{
ViewBag.content = "Tooltip Content";
return View();
}Output be like the below.
Tip pointer positioning
The Tooltip pointer can be attached or detached from the Tooltip by using the showTipPointer property. Pointer positions can be adjusted using the tipPointerPosition property that can be assigned to one of the following values:
autostartmiddleend
The following code example illustrates how to set the pointer to the start position of the Tooltip.
<div class="control-section">
<ejs-tooltip id="tooltip" tipPointerPosition="Start" content="Tooltip content">
<e-content-template>
<div id='target'>
<span>Show tooltip</span>
</div>
</e-content-template>
</ejs-tooltip>
</div>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#target {
background-color: #ececec;
border: 1px solid #c8c8c8;
box-sizing: border-box;
margin: 50px auto;
padding: 20px;
width: 250px;
}
</style>public ActionResult TipPointer()
{
ViewBag.content = "Tooltip Content";
return View();
}Output be like the below.
By default, tip pointers are auto adjusted so that the arrow does not point outside the target element.
Dynamic positioning
The Tooltip and its tip pointer can be positioned dynamically based on the target’s location. This can be achieved by using the refresh method, which auto adjusts the Tooltip over the target.
<ejs-tooltip id="targetContainer" content="Tooltip content" offsetX="-15" target="#demoSmart">
<e-content-template>
<div id="demoSmart"></div>
</e-content-template>
</ejs-tooltip>
<script type="text/javascript">
var tooltip, ele;
window.onload = function () {
ele = document.getElementById('demoSmart');
tooltip = document.getElementById("targetContainer").ej2_instances[0];
////Initialize Draggable for tooltip element
var drag = new ej.base.Draggable(ele, {
clone: false,
dragArea: '#targetContainer',
drag: function (args) {
if (args.element.getAttribute('data-tooltip-id') === null) {
tooltip.open(args.element);
}
else {
tooltip.refresh(args.element);
}
},
dragStart: function (args) {
if (args.element.getAttribute('data-tooltip-id') !== null) {
return;
}
tooltip.open(args.element);
},
dragStop: function (args) {
tooltip.close();
}
});
}
</script>
<style type="text/css">
#demoSmart {
background: rebeccapurple;
height: 50px;
left: 35%;
position: absolute;
top: 35%;
width: 50px;
}
#targetContainer {
margin: 10px;
min-height: 320px;
width: 100%;
float: left;
border: 1px solid #dddddd;
border-radius: 3px;
}
.control-section {
padding: 3px;
margin-right: 20px;
}
</style>public ActionResult DynamicPosition()
{
ViewBag.custom = "Drag Me";
return View();
}NOTE
When mouse trailing option is enabled, the tip pointer position gets auto adjusted based on the target, and other position values like start, end, and middle are not applied (to prevent the pointer from moving out of target).
Output be like the below.
Mouse Trailing
Tooltips can be positioned relative to the mouse pointer. This behavior can be enabled or disabled by using the mouseTrail property. By default, it is set to false.
<ejs-tooltip id="Tooltip" mouseTrail="true" content="Tooltip content">
<e-content-template>
<div id="target" style="margin: 50px;">
Show tooltip
</div>
</e-content-template>
</ejs-tooltip>
<style>
#target {
background-color: #ececec;
border: 1px solid #c8c8c8;
box-sizing: border-box;
margin: 80px auto;
padding: 20px;
width: 200px;
}
</style>public ActionResult MouseTrailing()
{
return View();
}Output be like the below.
NOTE
When mouse trailing option is enabled, the tip pointer position gets auto adjusted based on the target, and other position values like start, end, and middle are not applied (to prevent the pointer from moving out of target).
Setting offset values
Offset values are set to specify the distance between the target and tooltip element.
offsetX and offsetY properties are used to specify the offset left and top values.
-
offsetXspecifies the distance between the target and Tooltip element in X axis. -
offsetYspecifies the distance between the target and Tooltip element in Y axis.
The following code example illustrates how to set offset values.
<ejs-tooltip id="Tooltip" mouseTrail="true" showTipPointer="false" content="Tooltip content" offsetX="30" offsetY="30">
<e-content-template>
<div id="target">Show tooltip</div>
</e-content-template>
</ejs-tooltip>
<style>
#target {
background-color: #ececec;
border: 1px solid #c8c8c8;
box-sizing: border-box;
margin: 80px auto;
padding: 20px;
width: 200px;
}
</style>public ActionResult offsetvalues()
{
ViewBag.content = "Tooltip Content";
return View();
}Output be like the below.
NOTE
By default, collision is handled automatically and therefore when collision is detected the Tooltip fits horizontally and flips vertically.