doc: 更新 Tooltip 示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/TooltipContent.razor

@@ -0,0 +1 @@
+<i class="fa-solid fa-flag" style="cursor: pointer;" @onclick="ToggleShow" />

src/BootstrapBlazor.Server/Components/Components/TooltipContent.razor.cs

@@ -0,0 +1,25 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Components;
+
+/// <summary>
+/// TooltipContent 组件用于显示 Tooltip 的内容
+/// </summary>
+public partial class TooltipContent
+{
+    [CascadingParameter]
+    private Tooltip? Tooltip { get; set; }
+
+    private async Task ToggleShow()
+    {
+        if (Tooltip == null)
+        {
+            return;
+        }
+
+        await Tooltip.Toggle();
+    }
+}

src/BootstrapBlazor.Server/Components/Samples/Tooltips.razor

@@ -88,4 +88,21 @@
     </Tooltip>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["TooltipsManualTitle"]"
+           Introduction="@Localizer["TooltipsManualIntro"]"
+           Name="Manual">
+    <section ignore>
+        <ul class="ul-demo">
+            <li>@((MarkupString)Localizer["TooltipsManualDescLI1"].Value)</li>
+            <li>@((MarkupString)Localizer["TooltipsManualDescLI2"].Value)</li>
+        </ul>
+    </section>
+    <Tooltip Title="Cascading tooltip" Trigger="manual">
+        <TooltipContent></TooltipContent>
+    </Tooltip>
+    <Tooltip Title="OnClick tooltip" Trigger="manual" OnClick="ToggleShow">
+        <i class="fa-solid fa-flag" style="cursor: pointer;" />
+    </Tooltip>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Components/Samples/Tooltips.razor.cs

@@ -20,6 +20,8 @@ public partial class Tooltips
 
     private static string HtmlString => "This is <a href=\"www.blazor.zone\">Blazor</a> tooltip";
 
+    private static Task ToggleShow(IToggle toggle) => toggle.Toggle();
+
     /// <summary>
     /// 获得属性方法
     /// </summary>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -108,7 +108,11 @@
     "TooltipsCustomClassIntro": "Set the custom style by setting the <code>CustomClass</code> parameter",
     "BootstrapTooltipIntro": "Try to make a new component that is more comfortable to use, you can use it early, the name of the component may be changed later",
     "BootstrapTooltipTips1": "Wrap other components or <code>HTML</code> elements through <code>BootstrapTooltip</code> so that the wrapped object has the function of <code>Tooltip</code>",
-    "BootstrapTooltipTips2": "In this example, an icon is wrapped by <code>BootstrapTooltip</code>. When the mouse moves over the icon, the default <code>Tooltip</code> is displayed, which is easier and faster to use."
+    "BootstrapTooltipTips2": "In this example, an icon is wrapped by <code>BootstrapTooltip</code>. When the mouse moves over the icon, the default <code>Tooltip</code> is displayed, which is easier and faster to use.",
+    "TooltipsManualTitle": "Manual",
+    "TooltipsManualIntro": "Use code to control the tooltip state by setting <code>Trigger=\"manual\"</code>",
+    "TooltipsManualDescLI1": "The child component uses the cascade parameters to get the <code>Tooltip</code> instance and then calls its methods <code>Show</code> <code>Hide</code> <code>Toggle</code>",
+    "TooltipsManualDescLI2": "Call its method in the callback through the <code>Tooltip</code> parameter <code>OnClick</code>"
   },
   "BootstrapBlazor.Server.Components.Samples.Toasts": {
     "ToastsTitle": "Toast Lightweight Popup",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -108,7 +108,11 @@
     "TooltipsCustomClassIntro": "通过设置 <code>CustomClass</code> 参数进行自定义样式设置",
     "BootstrapTooltipIntro": "尝试新做一个用起来比较舒服的组件，可尝鲜使用，后期组件名字可能会更改",
     "BootstrapTooltipTips1": "通过 <code>BootstrapTooltip</code> 对其他组件或者 <code>HTML</code> 元素进行包裹，使其被包裹对象具有 <code>Tooltip</code> 功能",
-    "BootstrapTooltipTips2": "本例中通过 <code>BootstrapTooltip</code> 包裹一个图标，鼠标移动到图标上时，显示预设 <code>Tooltip</code> 使用更简单快捷"
+    "BootstrapTooltipTips2": "本例中通过 <code>BootstrapTooltip</code> 包裹一个图标，鼠标移动到图标上时，显示预设 <code>Tooltip</code> 使用更简单快捷",
+    "TooltipsManualTitle": "手动控制状态",
+    "TooltipsManualIntro": "通过设置 <code>Trigger=\"manual\"</code> 使用代码控制提示栏状态",
+    "TooltipsManualDescLI1": "子组件使用级联参数得到 <code>Tooltip</code> 实例，然后调用其相应方法 <code>Show</code> <code>Hide</code> <code>Toggle</code>",
+    "TooltipsManualDescLI2": "通过 <code>Tooltip</code> 参数 <code>OnClick</code> 在回调中调用其对应方法"
   },
   "BootstrapBlazor.Server.Components.Samples.Toasts": {
     "ToastsTitle": "Toast 轻量弹窗",