Adjusting Tooltip Position for Rotated Divs in Blazor
Environment
| Product |
Grid for Blazor, Tooltip for Blazor |
Description
When rotating <div> elements that have an associated Tooltip to display additional information, the Tooltip might not align correctly with the target element. The goal is to adjust the Tooltip's position so it aligns appropriately with the center of the rotated <div>, and optionally, remove the Tooltip's callout pointer for a cleaner appearance.
This KB article also answers the following questions:
- How to correctly position a Tooltip on a rotated
<div>in Blazor? - How can I hide the callout pointer of a Tooltip in Blazor?
- Is there a way to dynamically adjust Tooltip positioning based on element rotation in Blazor?
Solution
To address the issue of Tooltip misalignment on rotated <div> elements, consider the following two approaches:
Use an Inner Tooltip Target
Embed a tooltip target within the rotated element that won't be affected by the rotation. This method ensures the Tooltip aligns correctly without additional adjustments.
<TelerikTooltip TargetSelector=".tooltip-target .inner-target" Class="dynamic-tooltip-styles" />
<div style="padding: 5em;">
Hover this rectangle ...
<span class="tooltip-target" style="transform: rotate(-20deg);">
<span title="More info..." class="inner-target">
<TelerikSvgIcon Icon="@SvgIcon.InfoCircle" Size="@ThemeConstants.SvgIcon.Size.ExtraLarge" />
</span>
</span>
... or this one ...
<span class="tooltip-target" style="transform: rotate(45deg);">
<span title="More info..." class="inner-target">
<TelerikSvgIcon Icon="@SvgIcon.InfoCircle" Size="@ThemeConstants.SvgIcon.Size.ExtraLarge"/>
</span>
</span>
</div>
<style>
.tooltip-target {
display: inline-block;
width: 120px;
height: 25px;
background: yellow;
position: relative;
}
.tooltip-target .inner-target {
position: absolute;
right: .4em;
bottom: 0;
}
</style>
Adjust Tooltip Margin Dynamically
Calculate the necessary offset for the Tooltip and apply it as a margin style. Additionally, this solution includes how to hide the Tooltip's callout.
<TelerikTooltip TargetSelector=".tooltip-target" Class="dynamic-tooltip-styles" />
<div style="padding: 5em;">
Hover this rectangle ...
<span class="tooltip-target" title="Foo Tooltip" style="transform: rotate(-10deg);"
@onmouseover="@( (MouseEventArgs args) => OnTooltipTargetOver("15px") )">
</span>
<br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br />
... or this one ...
<span class="tooltip-target" title="Bar Tooltip" style="transform: rotate(45deg);"
@onmouseover="@( (MouseEventArgs args) => OnTooltipTargetOver("60px") )">
</span>
</div>
<style>
.tooltip-target {
display: inline-block;
width: 200px;
height: 20px;
background: yellow;
}
/* Remove tooltip callout */
.dynamic-tooltip-styles .k-callout {
display: none;
}
/* Move tooltip, depending on target CSS transform */
.dynamic-tooltip-styles {
margin-top: @TooltipMarginTop;
}
</style>
@code {
private string TooltipMarginTop { get; set; } = string.Empty;
private void OnTooltipTargetOver(string marginTop)
{
TooltipMarginTop = marginTop;
}
}