feat(tooltip): add no pointer variation (#1126)

adeo · May 10, 2022 · 8c5eb76 · 8c5eb76
1 parent ca71d8f
commit 8c5eb76
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 0 deletions.
diff --git a/packages/styles/components/_c.tooltip.scss b/packages/styles/components/_c.tooltip.scss
@@ -164,6 +164,15 @@
       }
     }
   }
+
+  &--no-pointer {
+    #{$parent}__content {
+      &::after,
+      &::before {
+        background: none;
+      }
+    }
+  }
 }
 
 /* mqp:end */
diff --git a/src/docs/Components/Tooltip/code.mdx b/src/docs/Components/Tooltip/code.mdx
@@ -52,6 +52,12 @@ You must apply one of these classes on your `.mc-tooltip` element according to t
 <div class="mc-tooltip mc-tooltip--top">...</div>
 ```
 
+### No pointer variation
+
+You must apply `mc-tooltip--no-pointer` modifier to your `.mc-tooltip` element.
+
+<Preview path="nopointer" nude />
+
 ## Accessibility
 
 <HintItem>

diff --git a/src/docs/Components/Tooltip/previews/nopointer.preview.html b/src/docs/Components/Tooltip/previews/nopointer.preview.html
@@ -0,0 +1,71 @@
+<div class="example">
+  <div class="mc-tooltip mc-tooltip--no-pointer mc-tooltip--top" aria-describedby="tooltipTop">
+    <div class="example-any-element">Top</div>
+
+    <span id="tooltipTop" class="mc-tooltip__content" role="tooltip"
+      >Tooltip text</span
+    >
+  </div>
+</div>
+
+<div class="example">
+  <div class="mc-tooltip mc-tooltip--no-pointer mc-tooltip--right" aria-describedby="tooltipRight">
+    <div class="example-any-element">Right</div>
+
+    <span id="tooltipRight" class="mc-tooltip__content" role="tooltip">
+      Tooltip text
+    </span>
+  </div>
+</div>
+
+<div class="example">
+  <div class="mc-tooltip mc-tooltip--no-pointer mc-tooltip--left" aria-describedby="tooltipLeft">
+    <div class="example-any-element">Left</div>
+
+    <span id="tooltipLeft" class="mc-tooltip__content" role="tooltip">
+      Tooltip text
+    </span>
+  </div>
+</div>
+
+<div class="example">
+  <div class="mc-tooltip mc-tooltip--no-pointer mc-tooltip--bottom" aria-describedby="tooltipBottom">
+    <div class="example-any-element">Bottom</div>
+
+    <span id="tooltipBottom" class="mc-tooltip__content" role="tooltip">
+      Here is an example with a little more text
+    </span>
+  </div>
+</div>
+
+<div class="example">
+  <div class="mc-tooltip mc-tooltip--no-pointer mc-tooltip--top" aria-describedby="tooltipTop">
+    <div class="example-any-element">
+      <svg width="32px" height="32px">
+        <use xlink:href="#info" />
+      </svg>
+    </div>
+
+    <span id="tooltipTop" class="mc-tooltip__content" role="tooltip">
+      Tooltip text
+    </span>
+  </div>
+</div>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  style="display: none"
+>
+  <symbol id="info">
+    <path
+      class="cls-2"
+      d="M16,29A13,13,0,1,1,29,16,13,13,0,0,1,16,29ZM16,5A11,11,0,1,0,27,16,11,11,0,0,0,16,5Z"
+    />
+    <path
+      class="cls-2"
+      d="M16,21.7a1,1,0,0,1-1-1V14.87a1,1,0,1,1,2,0V20.7A1,1,0,0,1,16,21.7Z"
+    />
+    <circle class="cls-2" cx="16" cy="11.3" r="1" />
+  </symbol>
+</svg>
diff --git a/src/docs/Components/Tooltip/previews/nopointer.preview.scss b/src/docs/Components/Tooltip/previews/nopointer.preview.scss
@@ -0,0 +1,9 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.tooltip";
+
+.example {
+  display: flex;
+  justify-content: center;
+  padding: 3rem;
+}