Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Trigger option on Tooltip component #2197

Merged
merged 1 commit into from
Apr 13, 2021
Merged

Add Trigger option on Tooltip component #2197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions Demos/Blazorise.Demo/Pages/Tests/ElementsPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,22 @@
</Column>
</Row>
</CardBody>
<CardBody>
<CardText>Tooltips can also be triggered by <code>click</code> or <code>focus</code> events.</CardText>
<Row>
<Column>
<Tooltip Text="I'm a tooltip!" Trigger="TooltipTrigger.Click">
<Button Color="Color.Primary">Click</Button>
</Tooltip>
<Tooltip Text="I'm a tooltip!" Trigger="TooltipTrigger.Focus">
<Button Color="Color.Primary">Focus</Button>
</Tooltip>
<Tooltip Text="I'm a tooltip!" Trigger="TooltipTrigger.MouseEnterClick">
<Button Color="Color.Primary">MouseEnterClick</Button>
</Tooltip>
</Column>
</Row>
</CardBody>
</Card>
</Column>
</Row>
Expand Down
40 changes: 40 additions & 0 deletions Source/Blazorise/Components/Tooltip/Tooltip.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@

namespace Blazorise
{
/// <summary>
/// Tooltips display informative text when users hover over, focus on, or tap an element.
/// </summary>
public partial class Tooltip : BaseComponent
{
#region Members
Expand All @@ -23,6 +26,8 @@ public partial class Tooltip : BaseComponent

private int fadeDuration = 300;

private TooltipTrigger trigger = TooltipTrigger.MouseEnterFocus;

#endregion

#region Methods
Expand Down Expand Up @@ -55,13 +60,30 @@ protected override void OnInitialized()
ShowArrow = ShowArrow,
Fade = Fade,
FadeDuration = FadeDuration,
Trigger = ToTippyTrigger( Trigger ),
} );
} );
}

base.OnInitialized();
}

private static string ToTippyTrigger( TooltipTrigger trigger )
{
switch ( trigger )
{
case TooltipTrigger.Click:
return "click";
case TooltipTrigger.Focus:
return "focusin";
case TooltipTrigger.MouseEnterClick:
return "mouseenter click";
case TooltipTrigger.MouseEnterFocus:
default:
return "mouseenter focus";
}
}

#endregion

#region Properties
Expand Down Expand Up @@ -179,6 +201,24 @@ public int FadeDuration
}
}

/// <summary>
/// Determines the events that cause the tooltip to show.
/// </summary>
[Parameter]
public TooltipTrigger Trigger
{
get => trigger;
set
{
trigger = value;

DirtyClasses();
}
}

/// <summary>
/// Specifies the content to be rendered inside this <see cref="Tooltip"/>.
/// </summary>
[Parameter] public RenderFragment ChildContent { get; set; }

#endregion
Expand Down
28 changes: 28 additions & 0 deletions Source/Blazorise/Enums/TooltipTrigger.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
namespace Blazorise
{
/// <summary>
/// Determines the events that cause the tooltip to show.
/// </summary>
public enum TooltipTrigger
{
/// <summary>
/// Tooltip will show on mouse enter and focus event (default option).
/// </summary>
MouseEnterFocus = 0,

/// <summary>
/// Tooltip will show on click event only.
/// </summary>
Click = 1,

/// <summary>
/// Tooltip will show on focus event only.
/// </summary>
Focus = 2,

/// <summary>
/// Tooltip will show on mouse enter and click event.
/// </summary>
MouseEnterClick = 3,
}
}
3 changes: 2 additions & 1 deletion Source/Blazorise/wwwroot/blazorise.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,8 @@ window.blazorise = {
maxWidth: options.multiline ? "15rem" : null,
duration: options.fade ? [options.fadeDuration, options.fadeDuration] : [0, 0],
arrow: options.showArrow,
allowHTML: true
allowHTML: true,
trigger: options.trigger
};

const alwaysActiveOptions = options.alwaysActive
Expand Down
19 changes: 10 additions & 9 deletions docs/_docs/components/tooltip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,13 @@ You can use one of the following modifiers to change positions of the tooltip:

## Attributes

| Name | Type | Default | Description |
|-------------------|--------------------------------------------------------------------|------------------|---------------------------------------------------------------------------|
| Text | string | null | Content displayed in the tooltip. |
| Placement | [Placement]({{ "/docs/helpers/enums/#placement" | relative_url }}) | `Top` | Position of the tooltip relative to it's component. |
| Multiline | bool | false | Force the multiline display. |
| AlwaysActive | bool | false | Always show tooltip, instead of just when hovering over the element. |
| Inline | bool | false | Force inline block instead of trying to detect the element block. |
| Fade | bool | false | Controls the fade effect. |
| FadeDuration | int | 300 | Duration in ms of the fade transition animation. |
| Name | Type | Default | Description |
|-------------------|-----------------------------------------------------------------------------------|-------------------|---------------------------------------------------------------------------|
| Text | string | null | Content displayed in the tooltip. |
| Placement | [Placement]({{ "/docs/helpers/enums/#placement" | relative_url }}) | `Top` | Position of the tooltip relative to it's component. |
| Multiline | bool | false | Force the multiline display. |
| AlwaysActive | bool | false | Always show tooltip, instead of just when hovering over the element. |
| Inline | bool | false | Force inline block instead of trying to detect the element block. |
| Fade | bool | false | Controls the fade effect. |
| FadeDuration | int | 300 | Duration in ms of the fade transition animation. |
| Trigger | [TooltipTrigger]({{ "/docs/helpers/enums/#tooltiptrigger" | relative_url }}) | `MouseEnterFocus` | Determines the events that cause the tooltip to show. |
11 changes: 10 additions & 1 deletion docs/_docs/helpers/enums.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,4 +294,13 @@ Defines the orientation of the elements.
Defines the resize mode of the data grid columns.

- `Header` - The data grid can only be resized from the columns header.
- `Columns` - The data grid can be resized from the entire column area.
- `Columns` - The data grid can be resized from the entire column area.

## TooltipTrigger

Determines the events that cause the tooltip to show.

- `MouseEnterFocus` - Tooltip will show on mouse enter and focus event (default option).
- `Click` - Tooltip will show on click event only.
- `Focus` - Tooltip will show on focus event only.
- `MouseEnterClick` - Tooltip will show on mouse enter and click event.