🆕 feat(Tooltip): add Text parameter to simplify the use of displayi…

…ng text (#2295)
masastack · Dec 26, 2024 · d4934e6 · d4934e6
1 parent ee638c1
commit d4934e6
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 48 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/components/tooltips/Alignment.razor b/docs/Masa.Blazor.Docs/Examples/components/tooltips/Alignment.razor
@@ -1,37 +1,25 @@
 <div class="text-center d-flex align-center justify-space-around">
-    <MTooltip Left>
+    <MTooltip Left Text="Left tooltip">
         <ActivatorContent>
             <MButton Color="primary" Dark @attributes="@context.Attrs">Left</MButton>
         </ActivatorContent>
-        <ChildContent>
-            <span>Left tooltip</span>
-        </ChildContent>
     </MTooltip>
 
-    <MTooltip Top>
+    <MTooltip Top Text="Top tooltip">
         <ActivatorContent>
             <MButton Color="primary" Dark @attributes="@context.Attrs">Top</MButton>
         </ActivatorContent>
-        <ChildContent>
-            <span>Top tooltip</span>
-        </ChildContent>
     </MTooltip>
 
-    <MTooltip Bottom>
+    <MTooltip Bottom Text="Bottom tooltip">
         <ActivatorContent>
             <MButton Color="primary" Dark @attributes="@context.Attrs">Bottom</MButton>
         </ActivatorContent>
-        <ChildContent>
-            <span>Bottom tooltip</span>
-        </ChildContent>
     </MTooltip>
 
-    <MTooltip Right>
+    <MTooltip Right Text="Right tooltip">
         <ActivatorContent>
             <MButton Color="primary" Dark @attributes="@context.Attrs">Right</MButton>
         </ActivatorContent>
-        <ChildContent>
-            <span>Right tooltip</span>
-        </ChildContent>
     </MTooltip>
 </div>
diff --git a/docs/Masa.Blazor.Docs/Examples/components/tooltips/Usage.razor b/docs/Masa.Blazor.Docs/Examples/components/tooltips/Usage.razor
@@ -1,28 +1,19 @@
 <div class="text-center d-flex align-center justify-space-around">
-    <MTooltip Bottom>
+    <MTooltip Bottom Text="Tooltip">
         <ActivatorContent>
             <MButton Dark Color="primary" @attributes="@context.Attrs">Bottom</MButton>
         </ActivatorContent>
-        <ChildContent>
-            <span>Tooltip</span>
-        </ChildContent>
     </MTooltip>
 
-    <MTooltip Bottom>
+    <MTooltip Bottom Text="Tooltip">
         <ActivatorContent>
             <MIcon Dark Color="primary" @attributes="@context.Attrs">mdi-home</MIcon>
         </ActivatorContent>
-        <ChildContent>
-            <span>Tooltip</span>
-        </ChildContent>
     </MTooltip>
 
-    <MTooltip Bottom>
+    <MTooltip Bottom Text="Tooltip">
         <ActivatorContent>
             <span @attributes="@context.Attrs">This text has a tooltip</span>
         </ActivatorContent>
-        <ChildContent>
-            <span>Tooltip</span>
-        </ChildContent>
     </MTooltip>
 </div>
diff --git a/docs/Masa.Blazor.Docs/Examples/components/tooltips/Visibility.razor b/docs/Masa.Blazor.Docs/Examples/components/tooltips/Visibility.razor
@@ -9,15 +9,12 @@
         </MCol>
 
         <MCol Cols="12" Class="mt-12">
-            <MTooltip @bind-Value="show" Top>
+            <MTooltip @bind-Value="show" Top Text="Programmatic tooltip">
                 <ActivatorContent>
                     <MButton Icon @attributes="@context.Attrs">
                         <MIcon Color="grey lighten-1">mdi-cart</MIcon>
                     </MButton>
                 </ActivatorContent>
-                <ChildContent>
-                    <span>Programmatic tooltip</span>
-                </ChildContent>
             </MTooltip>
         </MCol>
     </MRow>

diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/components/tooltips/en-US.md b/docs/Masa.Blazor.Docs/wwwroot/pages/components/tooltips/en-US.md
@@ -7,16 +7,14 @@ related:
   - /blazor/components/menus
 ---
 
+> Starting from v1.9.0, you can use the `Text` property to set a text type tooltip.
+
 ## Usage
 
 Tooltips can wrap any element.
 
 <masa-example file="Examples.components.tooltips.Usage"></masa-example>
 
-## Caveats
-
-<app-alert type="info" content="In order to correctly position **MTooltip**, a position support (`Top` | `Bottom ` |`Left ` | `Right`) is required."></app-alert>
-
 ## Examples
 
 ### Props

diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/components/tooltips/zh-CN.md b/docs/Masa.Blazor.Docs/wwwroot/pages/components/tooltips/zh-CN.md
@@ -7,27 +7,25 @@ related:
   - /blazor/components/menus
 ---
 
-## 使用
+> v1.9.0 开始可以使用 `Text` 属性来设置文本类型的提示。
+
+## 使用 {#usage}
 
 提示组件可以包装任何元素。
 
 <masa-example file="Examples.components.tooltips.Usage"></masa-example>
 
-## 注意
-
-<app-alert type="info" content="为了正确定位 **MTooltip**，需要一个位置支撑(`Top` | `Bottom` | `Left` | `Right`)。"></app-alert>
-
-## 示例
+## 示例 {#examples}
 
-### 属性
+### 属性 {#props}
 
-#### 对其
+#### 对齐 {#alignment}
 
 提示可以对齐到激活器元素的四个侧面。
 
 <masa-example file="Examples.components.tooltips.Alignment"></masa-example>
 
-#### 可见性
+#### 可见性 {#visibility}
 
 可使用 `@bind-Value` 编程性修改提示可见性。
 

diff --git a/src/Masa.Blazor/Components/Tooltip/MTooltip.razor b/src/Masa.Blazor/Components/Tooltip/MTooltip.razor
@@ -45,11 +45,10 @@
                                        Style="@style"
                                        ReferenceCaptureAction="r => ContentElement = r">
                     <MShouldRender Value="@IsActive">
-                        @ChildContent
+                        @(ChildContent ?? (RenderFragment)(b => b.AddContent(0, Text)))
                     </MShouldRender>
                 </ShowTransitionElement>
             </Transition>
         }
         : null;
-
 }
diff --git a/src/Masa.Blazor/Components/Tooltip/MTooltip.razor.cs b/src/Masa.Blazor/Components/Tooltip/MTooltip.razor.cs
@@ -1,4 +1,4 @@
-using Masa.Blazor.Mixins.Menuable;
+using Masa.Blazor.Mixins.Menuable;
 
 namespace Masa.Blazor
 {
@@ -12,6 +12,9 @@ public MTooltip()
 
         [Parameter] public string? Color { get; set; }
 
+        /// <summary>
+        /// The content that will be displayed in the tooltip.
+        /// </summary>
         [Parameter] public RenderFragment? ChildContent { get; set; }
 
         [Parameter] [MasaApiParameter("span")] public string Tag { get; set; } = "span";
@@ -20,6 +23,14 @@ public MTooltip()
 
         [Parameter] public string? ContentStyle { get; set; }
 
+        /// <summary>
+        /// The text that will be displayed in the tooltip.
+        /// If the <see cref="ChildContent"/> is set, this will be ignored. 
+        /// </summary>
+        [Parameter]
+        [MasaApiParameter(ReleasedOn = "v1.9.0")]
+        public string? Text { get; set; }
+
         protected override string DefaultAttachSelector => Permanent ? ".m-application__permanent" : ".m-application";
 
         private static Block _block = new("m-tooltip");