diff --git a/Demos/Blazorise.Demo/Pages/Tests/ElementsPage.razor b/Demos/Blazorise.Demo/Pages/Tests/ElementsPage.razor
index dc5c33002f..7485b6d2b7 100644
--- a/Demos/Blazorise.Demo/Pages/Tests/ElementsPage.razor
+++ b/Demos/Blazorise.Demo/Pages/Tests/ElementsPage.razor
@@ -59,6 +59,22 @@
+
+ Tooltips can also be triggered by click or focus events.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Source/Blazorise/Components/Tooltip/Tooltip.razor.cs b/Source/Blazorise/Components/Tooltip/Tooltip.razor.cs
index 94c58471df..417cc1c22c 100644
--- a/Source/Blazorise/Components/Tooltip/Tooltip.razor.cs
+++ b/Source/Blazorise/Components/Tooltip/Tooltip.razor.cs
@@ -5,6 +5,9 @@
namespace Blazorise
{
+ ///
+ /// Tooltips display informative text when users hover over, focus on, or tap an element.
+ ///
public partial class Tooltip : BaseComponent
{
#region Members
@@ -23,6 +26,8 @@ public partial class Tooltip : BaseComponent
private int fadeDuration = 300;
+ private TooltipTrigger trigger = TooltipTrigger.MouseEnterFocus;
+
#endregion
#region Methods
@@ -55,6 +60,7 @@ protected override void OnInitialized()
ShowArrow = ShowArrow,
Fade = Fade,
FadeDuration = FadeDuration,
+ Trigger = ToTippyTrigger( Trigger ),
} );
} );
}
@@ -62,6 +68,22 @@ protected override void OnInitialized()
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
@@ -179,6 +201,24 @@ public int FadeDuration
}
}
+ ///
+ /// Determines the events that cause the tooltip to show.
+ ///
+ [Parameter]
+ public TooltipTrigger Trigger
+ {
+ get => trigger;
+ set
+ {
+ trigger = value;
+
+ DirtyClasses();
+ }
+ }
+
+ ///
+ /// Specifies the content to be rendered inside this .
+ ///
[Parameter] public RenderFragment ChildContent { get; set; }
#endregion
diff --git a/Source/Blazorise/Enums/TooltipTrigger.cs b/Source/Blazorise/Enums/TooltipTrigger.cs
new file mode 100644
index 0000000000..c45d81ca6d
--- /dev/null
+++ b/Source/Blazorise/Enums/TooltipTrigger.cs
@@ -0,0 +1,28 @@
+namespace Blazorise
+{
+ ///
+ /// Determines the events that cause the tooltip to show.
+ ///
+ public enum TooltipTrigger
+ {
+ ///
+ /// Tooltip will show on mouse enter and focus event (default option).
+ ///
+ MouseEnterFocus = 0,
+
+ ///
+ /// Tooltip will show on click event only.
+ ///
+ Click = 1,
+
+ ///
+ /// Tooltip will show on focus event only.
+ ///
+ Focus = 2,
+
+ ///
+ /// Tooltip will show on mouse enter and click event.
+ ///
+ MouseEnterClick = 3,
+ }
+}
diff --git a/Source/Blazorise/wwwroot/blazorise.js b/Source/Blazorise/wwwroot/blazorise.js
index e731643afb..05d69aa8da 100644
--- a/Source/Blazorise/wwwroot/blazorise.js
+++ b/Source/Blazorise/wwwroot/blazorise.js
@@ -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
diff --git a/docs/_docs/components/tooltip.md b/docs/_docs/components/tooltip.md
index 0779ad6640..fef2d76feb 100644
--- a/docs/_docs/components/tooltip.md
+++ b/docs/_docs/components/tooltip.md
@@ -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. |
\ No newline at end of file
+| 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. |
\ No newline at end of file
diff --git a/docs/_docs/helpers/enums.md b/docs/_docs/helpers/enums.md
index 716661767f..aa297e2a6d 100644
--- a/docs/_docs/helpers/enums.md
+++ b/docs/_docs/helpers/enums.md
@@ -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.
\ No newline at end of file
+- `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.
\ No newline at end of file