Made tippy.js internal provider for Tooltip component (#2112)

* Made tipsy.js internal provider for Tooltip component * More Tooltip examples in the demo * Tippy.js note in the documentation * Add ShowArrow parameter
Megabit · Mar 31, 2021 · 0ab1089 · 0ab1089
1 parent 92fcebd
commit 0ab1089
Show file tree

Hide file tree

Showing 21 changed files with 214 additions and 306 deletions.
diff --git a/Demos/Blazorise.Demo/Pages/Tests/ElementsPage.razor b/Demos/Blazorise.Demo/Pages/Tests/ElementsPage.razor
@@ -23,6 +23,9 @@
                         <Tooltip Text="Tooltip text" AlwaysActive="true">
                             <Button Color="Color.Primary">Always Active</Button>
                         </Tooltip>
+                        <Tooltip Text="Tooltip text" ShowArrow="false">
+                            <Button Color="Color.Primary">No Arrow</Button>
+                        </Tooltip>
                     </Column>
                     <Column ColumnSize="ColumnSize.Is2">
                         <Field>
@@ -33,6 +36,29 @@
                     </Column>
                 </Row>
             </CardBody>
+            <CardBody>
+                <Row>
+                    <Column>
+                        <Tooltip Text="Hello tooltip" Placement="Placement.Left">
+                            <Button Color="Color.Primary">Left</Button>
+                        </Tooltip>
+                        <Tooltip Text="Hello tooltip" Placement="Placement.Top">
+                            <Button Color="Color.Primary">Top</Button>
+                        </Tooltip>
+                        <Tooltip Text="Hello tooltip" Placement="Placement.Bottom">
+                            <Button Color="Color.Primary">Bottom</Button>
+                        </Tooltip>
+                        <Tooltip Text="Hello tooltip" Placement="Placement.Right">
+                            <Button Color="Color.Primary">Right</Button>
+                        </Tooltip>
+                    </Column>
+                    <Column>
+                        <Tooltip Text="<span style='color: aqua;'>Hello</span>, this is a <strong>bolded content</strong>!">
+                            <Button Color="Color.Primary">Html content</Button>
+                        </Tooltip>
+                    </Column>
+                </Row>
+            </CardBody>
         </Card>
     </Column>
 </Row>

diff --git a/Source/Blazorise.AntDesign/AntDesignJSRunner.cs b/Source/Blazorise.AntDesign/AntDesignJSRunner.cs
@@ -16,9 +16,9 @@ public AntDesignJSRunner( IJSRuntime runtime )
         {
         }
 
-        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId )
+        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId, object options )
         {
-            return runtime.InvokeAsync<bool>( $"{ANTDESIGN_NAMESPACE}.tooltip.initialize", elementRef, elementId );
+            return runtime.InvokeAsync<bool>( $"{ANTDESIGN_NAMESPACE}.tooltip.initialize", elementRef, elementId, options );
         }
 
         public override ValueTask<bool> OpenModal( ElementReference elementRef, bool scrollToTop )

diff --git a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.js b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.js
@@ -4,7 +4,9 @@ if (!window.antDesign) {
 
 window.antDesign = {
     tooltip: {
-        initialize: (element, elementId) => {
+        initialize: (element, elementId, options) => {
+            window.blazorise.tooltip.initialize(element, elementId, options);
+
             if (element.querySelector(".ant-input,.ant-btn")) {
                 element.classList.add("b-tooltip-inline");
             }

diff --git a/Source/Blazorise.Bootstrap/BootstrapJSRunner.cs b/Source/Blazorise.Bootstrap/BootstrapJSRunner.cs
@@ -16,9 +16,9 @@ public BootstrapJSRunner( IJSRuntime runtime )
         {
         }
 
-        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId )
+        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId, object options )
         {
-            return runtime.InvokeAsync<bool>( $"{BOOTSTRAP_NAMESPACE}.tooltip.initialize", elementRef, elementId );
+            return runtime.InvokeAsync<bool>( $"{BOOTSTRAP_NAMESPACE}.tooltip.initialize", elementRef, elementId, options );
         }
 
         public override ValueTask<bool> OpenModal( ElementReference elementRef, bool scrollToTop )

diff --git a/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.js b/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.js
@@ -4,7 +4,9 @@ if (!window.blazoriseBootstrap) {
 
 window.blazoriseBootstrap = {
     tooltip: {
-        initialize: (element, elementId) => {
+        initialize: (element, elementId, options) => {
+            window.blazorise.tooltip.initialize(element, elementId, options);
+
             if (element.querySelector(".custom-control-input,.btn")) {
                 element.classList.add("b-tooltip-inline");
             }

diff --git a/Source/Blazorise.Bulma/BulmaJSRunner.cs b/Source/Blazorise.Bulma/BulmaJSRunner.cs
@@ -15,9 +15,9 @@ public BulmaJSRunner( IJSRuntime runtime )
 
         }
 
-        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId )
+        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId, object options )
         {
-            return runtime.InvokeAsync<bool>( $"blazoriseBulma.tooltip.initialize", elementRef, elementId );
+            return runtime.InvokeAsync<bool>( $"blazoriseBulma.tooltip.initialize", elementRef, elementId, options );
         }
 
         public override ValueTask<bool> OpenModal( ElementReference elementRef, bool scrollToTop )

diff --git a/Source/Blazorise.Bulma/wwwroot/blazorise.bulma.js b/Source/Blazorise.Bulma/wwwroot/blazorise.bulma.js
@@ -4,7 +4,9 @@ if (!window.blazoriseBulma) {
 
 window.blazoriseBulma = {
     tooltip: {
-        initialize: (element, elementId) => {
+        initialize: (element, elementId, options) => {
+            window.blazorise.tooltip.initialize(element, elementId, options);
+
             if (element.querySelector(".checkbox,.button")) {
                 element.classList.add("b-tooltip-inline");
             }

diff --git a/Source/Blazorise.Frolic/FrolicJSRunner.cs b/Source/Blazorise.Frolic/FrolicJSRunner.cs
@@ -14,9 +14,9 @@ public FrolicJSRunner( IJSRuntime runtime )
         {
         }
 
-        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId )
+        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId, object options )
         {
-            return runtime.InvokeAsync<bool>( $"blazoriseFrolic.tooltip.initialize", elementRef, elementId );
+            return runtime.InvokeAsync<bool>( $"blazoriseFrolic.tooltip.initialize", elementRef, elementId, options );
         }
 
         public override ValueTask<bool> OpenModal( ElementReference elementRef, bool scrollToTop )

diff --git a/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.js b/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.js
@@ -4,7 +4,8 @@ if (!window.blazoriseFrolic) {
 
 window.blazoriseFrolic = {
     tooltip: {
-        initialize: (element, elementId) => {
+        initialize: (element, elementId, options) => {
+            window.blazorise.tooltip.initialize(element, elementId, options);
 
             if (element.querySelector(".e-btn")) {
                 element.classList.add("b-tooltip-inline");

diff --git a/Source/Blazorise.Material/MaterialJSRunner.cs b/Source/Blazorise.Material/MaterialJSRunner.cs
@@ -13,9 +13,9 @@ public MaterialJSRunner( IJSRuntime runtime )
         {
         }
 
-        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId )
+        public override ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId, object options )
         {
-            return runtime.InvokeAsync<bool>( $"blazoriseMaterial.tooltip.initialize", elementRef, elementId );
+            return runtime.InvokeAsync<bool>( $"blazoriseMaterial.tooltip.initialize", elementRef, elementId, options );
         }
 
         public override ValueTask InitializeDatePicker( ElementReference elementRef, string elementId, object options )

diff --git a/Source/Blazorise.Material/wwwroot/blazorise.material.js b/Source/Blazorise.Material/wwwroot/blazorise.material.js
diff --git a/Source/Blazorise/Components/Tooltip/Tooltip.razor b/Source/Blazorise/Components/Tooltip/Tooltip.razor
@@ -1,7 +1,7 @@
 @namespace Blazorise
 @inherits BaseComponent
 <CascadingValue Value="@this" IsFixed="true">
-    <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" role="tooltip" data-tooltip="@Text" @attributes="@Attributes">
+    <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" role="tooltip" @attributes="@Attributes">
         @ChildContent
     </div>
 </CascadingValue>
diff --git a/Source/Blazorise/Components/Tooltip/Tooltip.razor.cs b/Source/Blazorise/Components/Tooltip/Tooltip.razor.cs
@@ -15,10 +15,14 @@ public partial class Tooltip : BaseComponent
 
         private bool alwaysActive;
 
+        private bool showArrow = true;
+
         private bool inline;
 
         private bool fade;
 
+        private int fadeDuration = 300;
+
         #endregion
 
         #region Methods
@@ -42,7 +46,16 @@ protected override void OnInitialized()
                 // try to detect if inline is needed
                 ExecuteAfterRender( async () =>
                 {
-                    await JSRunner.InitializeTooltip( ElementRef, ElementId );
+                    await JSRunner.InitializeTooltip( ElementRef, ElementId, new
+                    {
+                        Text = Text,
+                        Placement = ClassProvider.ToPlacement( Placement ),
+                        Multiline = Multiline,
+                        AlwaysActive = AlwaysActive,
+                        ShowArrow = ShowArrow,
+                        Fade = Fade,
+                        FadeDuration = FadeDuration,
+                    } );
                 } );
             }
 
@@ -106,6 +119,21 @@ public bool AlwaysActive
             }
         }
 
+        /// <summary>
+        /// Gets or sets the tooltip arrow visibility.
+        /// </summary>
+        [Parameter]
+        public bool ShowArrow
+        {
+            get => showArrow;
+            set
+            {
+                showArrow = value;
+
+                DirtyClasses();
+            }
+        }
+
         /// <summary>
         /// Force inline block instead of trying to detect the element block.
         /// </summary>
@@ -136,6 +164,21 @@ public bool Fade
             }
         }
 
+        /// <summary>
+        /// Duration in ms of the fade transition animation.
+        /// </summary>
+        [Parameter]
+        public int FadeDuration
+        {
+            get => fadeDuration;
+            set
+            {
+                fadeDuration = value;
+
+                DirtyClasses();
+            }
+        }
+
         [Parameter] public RenderFragment ChildContent { get; set; }
 
         #endregion

diff --git a/Source/Blazorise/Interfaces/IJSRunner.cs b/Source/Blazorise/Interfaces/IJSRunner.cs
@@ -20,7 +20,7 @@ public interface IJSRunner
 
         ValueTask<bool> DestroyNumericEdit( ElementReference elementRef, string elementId );
 
-        ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId );
+        ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId, object options );
 
         ValueTask<bool> InitializeButton( ElementReference elementRef, string elementId, bool preventDefaultSubmit );
 

diff --git a/Source/Blazorise/JSRunner.cs b/Source/Blazorise/JSRunner.cs
@@ -53,9 +53,9 @@ public ValueTask<bool> DestroyNumericEdit( ElementReference elementRef, string e
             return runtime.InvokeAsync<bool>( $"{BLAZORISE_NAMESPACE}.numericEdit.destroy", elementRef, elementId );
         }
 
-        public virtual ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId )
+        public virtual ValueTask<bool> InitializeTooltip( ElementReference elementRef, string elementId, object options )
         {
-            return runtime.InvokeAsync<bool>( $"{BLAZORISE_NAMESPACE}.tooltip.initialize", elementRef, elementId );
+            return runtime.InvokeAsync<bool>( $"{BLAZORISE_NAMESPACE}.tooltip.initialize", elementRef, elementId, options );
         }
 
         public virtual ValueTask<bool> InitializeButton( ElementReference elementRef, string elementId, bool preventDefaultSubmit )

diff --git a/Source/Blazorise/Styles/progress.scss → Source/Blazorise/Styles/_progress.scss b/Source/Blazorise/Styles/progress.scss → Source/Blazorise/Styles/_progress.scss
diff --git a/Source/Blazorise/Styles/_tooltip.scss b/Source/Blazorise/Styles/_tooltip.scss
@@ -0,0 +1,49 @@
+.tippy-box[data-animation=scale][data-placement^=top] {
+    transform-origin: bottom
+}
+
+.tippy-box[data-animation=scale][data-placement^=bottom] {
+    transform-origin: top
+}
+
+.tippy-box[data-animation=scale][data-placement^=left] {
+    transform-origin: right
+}
+
+.tippy-box[data-animation=scale][data-placement^=right] {
+    transform-origin: left
+}
+
+.tippy-box[data-animation=scale][data-state=hidden] {
+    transform: scale(.5);
+    opacity: 0
+}
+
+.tippy-box[data-theme~='blazorise'] {
+    background-color: #{"RGBA("}$tooltip-background-color-r, $tooltip-background-color-g, $tooltip-background-color-b, $tooltip-background-opacity#{")"};
+    color: $tooltip-color;
+}
+
+.tippy-box[data-theme~='blazorise'][data-placement^='top'] > .tippy-arrow::before {
+    border-top-color: #{"RGBA("}$tooltip-background-color-r, $tooltip-background-color-g, $tooltip-background-color-b, $tooltip-background-opacity#{")"};
+}
+
+.tippy-box[data-theme~='blazorise'][data-placement^='bottom'] > .tippy-arrow::before {
+    border-bottom-color: #{"RGBA("}$tooltip-background-color-r, $tooltip-background-color-g, $tooltip-background-color-b, $tooltip-background-opacity#{")"};
+}
+
+.tippy-box[data-theme~='blazorise'][data-placement^='left'] > .tippy-arrow::before {
+    border-left-color: #{"RGBA("}$tooltip-background-color-r, $tooltip-background-color-g, $tooltip-background-color-b, $tooltip-background-opacity#{")"};
+}
+
+.tippy-box[data-theme~='blazorise'][data-placement^='right'] > .tippy-arrow::before {
+    border-right-color: #{"RGBA("}$tooltip-background-color-r, $tooltip-background-color-g, $tooltip-background-color-b, $tooltip-background-opacity#{")"};
+}
+
+.tippy-box[data-theme~='blazorise'] > .tippy-svg-arrow {
+    fill: #{"RGBA("}$tooltip-background-color-r, $tooltip-background-color-g, $tooltip-background-color-b, $tooltip-background-opacity#{")"};
+}
+
+.b-tooltip-inline {
+    display: inline-block;
+}