Skip to content

Commit 0ba6d00

Browse files
committed
chore(kb): update slug and examples
1 parent 5c2811e commit 0ba6d00

File tree

1 file changed

+4
-5
lines changed

1 file changed

+4
-5
lines changed

knowledge-base/tooltip-position-rotated-div.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ ticketid: 1657431
2525

2626
## Description
2727

28-
When rotating div elements that have an associated [Tooltip]({%slug %}) 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.
28+
When rotating div elements that have an associated [Tooltip]({%slug tooltip-overview%}) 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.
2929

3030
This KB article also answers the following questions:
3131
- How to correctly position a Tooltip on a rotated div in Blazor?
@@ -48,14 +48,15 @@ Calculate the necessary offset for the Tooltip and apply it as a margin style. A
4848
4949
<span class="tooltip-target" title="Foo Tooltip" style="transform: rotate(-10deg);"
5050
@onmouseover="@( (MouseEventArgs args) => OnTooltipTargetOver("15px") )">
51-
FOO
5251
</span>
5352
53+
<br /> <br /> <br /> <br /> <br />
54+
<br /> <br /> <br /> <br /> <br />
55+
5456
... or this one ...
5557
5658
<span class="tooltip-target" title="Bar Tooltip" style="transform: rotate(45deg);"
5759
@onmouseover="@( (MouseEventArgs args) => OnTooltipTargetOver("60px") )">
58-
BAR
5960
</span>
6061
</div>
6162
@@ -99,7 +100,6 @@ Embed a tooltip target within the rotated element that won't be affected by the
99100
Hover this rectangle ...
100101
101102
<span class="tooltip-target" style="transform: rotate(-20deg);">
102-
FOO
103103
<span title="Foo Tooltip" class="inner-target">
104104
<TelerikSvgIcon Icon="@SvgIcon.QuestionCircle" />
105105
</span>
@@ -108,7 +108,6 @@ Embed a tooltip target within the rotated element that won't be affected by the
108108
... or this one ...
109109
110110
<span class="tooltip-target" style="transform: rotate(45deg);">
111-
BAR
112111
<span title="Bar Tooltip" class="inner-target">
113112
<TelerikSvgIcon Icon="@SvgIcon.QuestionCircle" />
114113
</span>

0 commit comments

Comments
 (0)