Skip to content

Commit 71e2a25

Browse files
desmondinhodesmondinho
authored
feat(components): add Tooltip component (#224)
* feat(tooltip): initial * refactor(popover): introduce PopoverWrapper to simplify open state * fix(popover): ensure arrow is positioned correctly * fix(popover): ensure popover closes on trigger click if already opened * fix(popover): position flicker * test(popover/dropdown): adjust tests * refactor(popover): remove LastShown meta from popover service * feat(tooltip): add baseline implementation * feat(tooltip): add common visual-related parameters to pass into popover * feat(tooltip): add OpenDelay and CloseDelay params * docs(tooltip): add Tooltip page * feat(tooltip): pass slots to popover * chore(popover): add full radius styles * test(tooltip): add tests * docs(tooltip): minor tweaks
1 parent 20850ca commit 71e2a25

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+907
-257
lines changed

‎docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ public class NavigationStore
4646
.Add( new( nameof( LumexSpinner ), ComponentStatus.New ) )
4747
.Add( new( nameof( LumexSwitch ) ) )
4848
.Add( new( nameof( LumexTabs ) ) )
49-
.Add( new( nameof( LumexTextbox ) ) );
49+
.Add( new( nameof( LumexTextbox ) ) )
50+
.Add( new( nameof( LumexTooltip ), ComponentStatus.New ) );
5051

5152
private static NavigationCategory ComponentsApiCategory =>
5253
new NavigationCategory( "Components API", Icons.Rounded.Manufacturing )

‎docs/LumexUI.Docs.Client/Pages/Components/Tooltip/Examples/Arrow.razor‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<LumexTooltip Content="@("I am a tooltip")" ShowArrow="@true">
2+
<LumexButton>Hover me</LumexButton>
3+
</LumexTooltip>

‎docs/LumexUI.Docs.Client/Pages/Components/Tooltip/Examples/Colors.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
2+
{
3+
var colorText = color.ToString();
4+
5+
<LumexTooltip Content="@colorText" Color="@color">
6+
<LumexButton Color="@color">@colorText</LumexButton>
7+
</LumexTooltip>
8+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Tooltip/Examples/CustomContent.razor‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<LumexTooltip Content="@_customContent">
2+
<LumexButton>Hover me</LumexButton>
3+
</LumexTooltip>
4+
5+
@code {
6+
private RenderFragment _customContent =
7+
@<div class="px-1 py-2">
8+
<div class="text-small font-bold">Custom content</div>
9+
<div class="text-tiny">This is a custom tooltip content</div>
10+
</div>;
11+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Tooltip/Examples/CustomStyles.razor‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<LumexTooltip Content="@("I am a tooltip")"
2+
Placement="@TooltipPlacement.Right"
3+
ShowArrow="@true"
4+
Classes="@_classes">
5+
<LumexButton>Hover me</LumexButton>
6+
</LumexTooltip>
7+
8+
@code {
9+
private TooltipSlots _classes = new()
10+
{
11+
Content = ElementClass.Empty()
12+
.Add( "py-2 px-4 shadow-xl" )
13+
.Add( "text-black bg-gradient-to-br from-white to-default-400" )
14+
.ToString(),
15+
Arrow = "bg-default-400"
16+
};
17+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Tooltip/Examples/Offset.razor‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<LumexTooltip Content="@("I am a tooltip")"
2+
Color="@ThemeColor.Warning">
3+
<LumexButton Color="@ThemeColor.Warning"
4+
Variant="@Variant.Flat">
5+
Default offset (8)
6+
</LumexButton>
7+
</LumexTooltip>
8+
9+
<LumexTooltip Content="@("I am a tooltip")" Offset="16"
10+
Color="@ThemeColor.Warning">
11+
<LumexButton Color="@ThemeColor.Warning"
12+
Variant="@Variant.Flat">
13+
16 offset
14+
</LumexButton>
15+
</LumexTooltip>
16+
17+
<LumexTooltip Content="@("I am a tooltip")" Offset="-7"
18+
Color="@ThemeColor.Warning">
19+
<LumexButton Color="@ThemeColor.Warning"
20+
Variant="@Variant.Flat">
21+
-7 offset
22+
</LumexButton>
23+
</LumexTooltip>

‎docs/LumexUI.Docs.Client/Pages/Components/Tooltip/Examples/Placements.razor‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
2+
@foreach( var placement in Enum.GetValues<TooltipPlacement>() )
3+
{
4+
var placementText = placement.ToDescription().Replace( "-", " " );
5+
6+
<LumexTooltip Content="@placementText" Placement="@placement">
7+
<LumexButton Color="@ThemeColor.Danger"
8+
Variant="@Variant.Flat"
9+
FullWidth="@true"
10+
Class="capitalize">
11+
@placementText
12+
</LumexButton>
13+
</LumexTooltip>
14+
}
15+
</div>

‎docs/LumexUI.Docs.Client/Pages/Components/Tooltip/Examples/Radii.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@foreach( var radius in Enum.GetValues<Radius>() )
2+
{
3+
var radiusText = radius.ToString();
4+
5+
<LumexTooltip Content="@radiusText" Radius="@radius">
6+
<LumexButton Variant="@Variant.Flat" Color="@ThemeColor.Secondary">
7+
@radiusText
8+
</LumexButton>
9+
</LumexTooltip>
10+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Tooltip/Examples/Shadows.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@foreach( var shadow in Enum.GetValues<Shadow>() )
2+
{
3+
var shadowText = shadow.ToString();
4+
5+
<LumexTooltip Content="@shadowText" Shadow="@shadow">
6+
<LumexButton Variant="@Variant.Flat" Color="@ThemeColor.Success">
7+
@shadowText
8+
</LumexButton>
9+
</LumexTooltip>
10+
}

‎docs/LumexUI.Docs.Client/Pages/Components/Tooltip/Examples/Sizes.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@foreach( var size in Enum.GetValues<Size>() )
2+
{
3+
var sizeText = size.ToString();
4+
5+
<LumexTooltip Content="@sizeText" Size="@size">
6+
<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Flat">
7+
@sizeText
8+
</LumexButton>
9+
</LumexTooltip>
10+
}

0 commit comments

Comments
 (0)