Fix Tooltips (#585)

* Paginator, Menu and MenuSurface updates * Update release notes * Remove debugging text * Clarify Action names * Fix tooltip markup to material v12 * Release Notes * Further release notes updates * Release notes * Tooltip page markup improvement
Material-Blazor · Dec 4, 2021 · 7650995 · 7650995
1 parent 2007a19
commit 7650995
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 44 deletions.
diff --git a/Material.Blazor.Website/Pages/Tooltip.razor b/Material.Blazor.Website/Pages/Tooltip.razor
@@ -55,26 +55,22 @@
                         </div>
                         <div class="mdc-layout-grid__cell--span-12">
                             <p>
-                                <MBTooltip TooltipType="@MBTooltipType.Span">
+                                <MBTooltip>
                                     <Target>
-                                        <span style="background-color: var(--mb-color-red-100);">Tooltip applied with TooltipType="MBTooltipType.Span" using the whole paragraph as the target.</span>
+                                        <span style="background-color: var(--mb-color-red-100);">Tooltip applied using the whole paragraph as the target.</span>
                                     </Target>
                                     <Content>
-                                        &lt;
-                                        <strong>MBTooltip TooltipType</strong>="MBTooltipType.
-                                        <em><u>Span</u></em>"&gt;
+                                        Centred on the paragraph
                                     </Content>
                                 </MBTooltip>
                             </p>
 
-                            <MBTooltip TooltipType="@MBTooltipType.Div">
+                            <MBTooltip>
                                 <Target>
-                                    <p style="background-color: var(--mb-color-red-100);">Tooltip applied with TooltipType="MBTooltipType.Div" using the whole div as the target.</p>
+                                    <p style="background-color: var(--mb-color-red-100);">Tooltip applied using the whole div as the target.</p>
                                 </Target>
                                 <Content>
-                                    &lt;
-                                    <strong>MBTooltip TooltipType</strong>="MBTooltipType.
-                                    <em><u>Div</u></em>"&gt;
+                                    Centred on the div
                                 </Content>
                             </MBTooltip>
                         </div>

diff --git a/Material.Blazor.Website/Styles/app.scss b/Material.Blazor.Website/Styles/app.scss
@@ -161,7 +161,7 @@
     /*
         Dynamic link underlining
     */
-    a:not(.mdc-deprecated-list-item) {
+    a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor) {
         position: relative;
         box-shadow: inset 0 -2px 0 theme.$secondary;
         display: inline-flex;
@@ -171,13 +171,13 @@
         transition: 0.15s ease;
     }
 
-    a:not(.mdc-deprecated-list-item):hover {
+    a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor):hover {
         box-shadow: none;
         color: theme.$on-secondary;
         text-decoration: none;
     }
 
-    a:not(.mdc-deprecated-list-item)::after {
+    a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor)::after {
         content: "";
         background: theme.$secondary;
         position: absolute;
@@ -189,7 +189,7 @@
         transition: 0.15s ease;
     }
 
-    a:not(.mdc-deprecated-list-item):hover:after {
+    a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor):hover:after {
         height: 100%;
     }
 

diff --git a/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor b/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor
@@ -17,7 +17,7 @@
                  role="tooltip"
                  aria-hidden="true"
                  style="z-index: 1000;">
-                <div class="mdc-tooltip__surface">
+                <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
                     @if (tooltip.RenderFragmentContent == null)
                     {
                         @tooltip.MarkupStringContent;

diff --git a/Material.Blazor/Components/Tooltip/MBTooltip.razor b/Material.Blazor/Components/Tooltip/MBTooltip.razor
@@ -3,21 +3,9 @@
 @inherits ComponentBase
 
 
-@if (TooltipType == MBTooltipType.Span)
-{
-    <span aria-describedby="mb-tooltip-@id">
-        @if (Target != null)
-        {
-            @Target
-        }
-    </span>
-}
-else
-{
-    <div aria-describedby="mb-tooltip-@id">
-        @if (Target != null)
-        {
-            @Target
-        }
-    </div>
-}
+<a class="mb-tooltip-anchor" aria-describedby="mb-tooltip-@id">
+    @if (Target != null)
+    {
+        @Target
+    }
+</a>
diff --git a/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs b/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs
@@ -25,8 +25,9 @@ public partial class MBTooltip : ComponentBase, IDisposable
 
 
         /// <summary>
-        /// The tooltip's content.
+        /// OBSOLETE TO BE REMOVED IN VERSION 3.0.0. The tooltip type.
         /// </summary>
+        [Obsolete]
         [Parameter] public MBTooltipType TooltipType { get; set; } = MBTooltipType.Span;
 
 

diff --git a/Material.Blazor/Model/MBEnumerations.cs b/Material.Blazor/Model/MBEnumerations.cs
@@ -777,9 +777,10 @@ public enum MBToastPosition
 
 
     /// <summary>
-    /// Determines the density of a component
+    /// OBSOLETE - TO BE REMOVED IN VERSION 3.0.0. Determines the density of a component.
     /// <para>Defaults to <see cref="Span"/></para>
     /// </summary>
+    [Obsolete]
     public enum MBTooltipType
     {
         /// <summary>
@@ -788,7 +789,7 @@ public enum MBTooltipType
         Span,
 
         /// <summary>
-        /// Uses a &lt;div&gt; element for a tooltip - the default.
+        /// Uses a &lt;div&gt; element for a tooltip.
         /// </summary>
         Div
     }

diff --git a/articles/ReleaseNotes.md b/articles/ReleaseNotes.md
@@ -22,14 +22,15 @@ Released 2021-??-??
 
 <br />
 
-#### [2.0.1](https://github.com/Material-Blazor/Material.Blazor)
+#### [2.0.1](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.1)
 Released 2021-12-04
 
-- Fixes bug in MBPaginator where menu for number of items per pages doesn't open
+- Fixes bug in MBPaginator where menu for number of items per pages doesn't open.
+- Updates tooltip markup to be Material Components Web 12, fixing a bug where tooltips failed to close when the anchor loses hover state.
 
 <br />
 
-#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor)
+#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.0)
 Released 2021-11-10
 
 **Updates**
@@ -50,7 +51,7 @@ Released 2021-11-10
 
 <br />
 
-#### [2.0.0-rc.1](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.0-preview.9)
+#### [2.0.0-rc.1](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.0-rc.1)
 2021-10-29
 
 **Updates**

diff --git a/articles/Tooltip.md b/articles/Tooltip.md
@@ -21,7 +21,7 @@ The [MBTooltip](xref:C.MBTooltip) component gives you flexible tooltips that tak
 in your page and Content for the tooltip's content, e.g.:
 
 ```html
-<MBTooltip TooltipType="@MBTooltipType.Span">
+<MBTooltip>
     <Target>
         <span style="background-color: var(--mb-color-red-100);">This is the target span to be displayed in your razor page.</span>
     </Target>
@@ -30,6 +30,3 @@ in your page and Content for the tooltip's content, e.g.:
     </Content>
 </MBTooltip>
 ```
-
-This tooltip surrounds your `<Target>` with either a span or div depending on whether the `TooltipType` is `MBTooltipType.Span` or
-`MBTooltipType.Div` respectively.