The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.
Use the following CSS to customize the tooltip.
.e-tooltip-wrap {
border-radius: 4px;
opacity: 1;
}Use the following CSS to customize the tooltip popup properties.
.e-tooltip-wrap.e-popup {
background-color: #fff;
border: 2px solid #000;
}Use the following CSS to customize the tooltip content.
.e-tooltip-wrap .e-tip-content {
color: red;
font-size: 12px;
line-height: 20px;
}Use the following CSS to customize the tooltip arrow tip.
/* To customize the arrow tip at bottom */
.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
height: 12px;
left: 50%;
top: 100%;
width: 24px;
}
/* To customize the arrow tip at top */
.e-tooltip-wrap .e-arrow-tip.e-tip-top {
height: 12px;
left: 50%;
top: -9px;
width: 24px;
}
/* To customize the arrow tip at left */
.e-tooltip-wrap .e-arrow-tip.e-tip-left {
height: 24px;
left: -9px;
top: 48%;
width: 12px;
}
/* To customize the arrow tip at right */
.e-tooltip-wrap .e-arrow-tip.e-tip-right {
height: 24px;
left: 100%;
top: 50%;
width: 12px;
}Use the following CSS to customize the tooltip inner tip.
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
color: #fff;
font-size: 25.9px;
}Use the following CSS to customize the tooltip outer tip.
/* To customize the arrow tip at bottom */
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
border-left: 12px solid transparent;
border-right: 14px solid transparent;
border-top: 12px solid #000;
}
/* To customize the arrow tip at top */
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
border-bottom: 12px solid #000;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
/* To customize the arrow tip at left */
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
border-bottom: 12px solid transparent;
border-right: 12px solid #000;
border-top: 12px solid transparent;
}
/* To customize the arrow tip at right */
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
border-bottom: 12px solid transparent;
border-left: 12px solid #000;
border-top: 12px solid transparent;
}