From f5cc51bb9d6d16d63e37b11d7a607767a952e7ee Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 20 Sep 2022 18:29:40 +0700
Subject: [PATCH] feat: Tooltip

---
 contents/_includes/patterns/tooltip.njk |   4 +
 contents/index.njk                      |   1 +
 contents/tooltip.md                     |  89 ++++++++++++++++
 pages/tooltip/index.tsx                 | 136 ------------------------
 patterns/tooltip/Cover.tsx              |  56 ----------
 styles/index.scss                       |   1 +
 styles/patterns/_tooltip.scss           |  66 ++++++++++++
 7 files changed, 161 insertions(+), 192 deletions(-)
 create mode 100644 contents/_includes/patterns/tooltip.njk
 create mode 100644 contents/tooltip.md
 delete mode 100644 pages/tooltip/index.tsx
 delete mode 100644 patterns/tooltip/Cover.tsx
 create mode 100644 styles/patterns/_tooltip.scss

diff --git a/contents/_includes/patterns/tooltip.njk b/contents/_includes/patterns/tooltip.njk
new file mode 100644
index 0000000..4ef5414
--- /dev/null
+++ b/contents/_includes/patterns/tooltip.njk
@@ -0,0 +1,4 @@
+<div class="tooltip">
+    <div class="tooltip__content">{% lines "hor", 5 %}</div>
+    <div class="tooltip__arrow"></div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 10250ed..ddf55f4 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -77,6 +77,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %}
             {% pattern "Radial progress bar" %}{% include "patterns/radial-progress-bar.njk" %}{% endpattern %}
             {% pattern "Resizable element" %}{% include "patterns/resizable-element.njk" %}{% endpattern %}
+            {% pattern "Tooltip" %}{% include "patterns/tooltip.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/contents/tooltip.md b/contents/tooltip.md
new file mode 100644
index 0000000..275920d
--- /dev/null
+++ b/contents/tooltip.md
@@ -0,0 +1,89 @@
+---
+layout: layouts/post.njk
+title: Tooltip
+description: Create a tooltip with CSS
+keywords: css tooltip
+---
+
+## HTML
+
+```html
+<div class="tooltip">
+    <!-- The tooltip content -->
+    <div class="tooltip__content">
+        ...
+    </div>
+
+    <!-- The tooltip arrow -->
+    <div class="tooltip__arrow"></div>
+
+    <!-- The trigger element -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.tooltip {
+    /* Used to position the arrow */
+    position: relative;
+}
+
+/* Show the arrow and content and restore pointer events when hovering the trigger element */
+.tooltip:hover .tooltip__arrow,
+.tooltip:hover .tooltip__content {
+    opacity: 1;
+    pointer-events: initial;
+}
+
+.tooltip__arrow {
+    /* Invisible by default */
+    opacity: 0;
+
+    /* To prevent accidental interactions with other elements  */
+    pointer-events: none;
+
+    /* Border */
+    border: 0.5rem solid transparent;
+    border-top-color: #111827;
+
+    /* Position */
+    bottom: 100%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, 8px);
+
+    /* Zero size */
+    height: 0;
+    width: 0;
+
+    /* Displayed on top of other element */
+    z-index: 10;
+}
+
+.tooltip__content {
+    /* Invisible by default */
+    opacity: 0;
+
+    /* To prevent accidental interactions with other elements  */
+    pointer-events: none;
+
+    /* Background color, must be the same as the border color of arrow */
+    background-color: #111827;
+    border-radius: 0.25rem;
+
+    /* Position */
+    bottom: 100%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, -8px);
+
+    /* Displayed on top of other element */
+    z-index: 10;
+}
+```
+
+{% demo %}
+{% include "patterns/tooltip.njk" %}
+{% enddemo %}
diff --git a/pages/tooltip/index.tsx b/pages/tooltip/index.tsx
deleted file mode 100644
index ffd3726..0000000
--- a/pages/tooltip/index.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.Tooltip}>
-            <Head>
-                <meta name="description" content="Create a tooltip with CSS" />
-                <meta name="og:description" content="Create a tooltip with CSS" />
-                <meta name="twitter:description" content="Create a tooltip with CSS" />
-                <meta name="keywords" content="css tooltip" />
-            </Head>
-            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                Move the mouser over the main element to see the tooltip.
-            </div>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- The tooltip content -->
-    <div class="container__content">
-        ...
-    </div>
-
-    <!-- The tooltip arrow -->
-    <div class="container__arrow" />
-
-    <!-- The trigger element -->
-    ...
-</div>
-`}
-                css={`
-                    .container {
-                        /* Used to position the arrow */
-                        position: relative;
-                    }
-
-                    /* Show the arrow and content and restore pointer events when hovering the trigger element */
-                    .container:hover .container__arrow,
-                    .container:hover .container__content {
-                        opacity: 1;
-                        pointer-events: initial;
-                    }
-
-                    .container__arrow {
-                        /* Invisible by default */
-                        opacity: 0;
-
-                        /* To prevent accidental interactions with other elements  */
-                        pointer-events: none;
-
-                        /* Border */
-                        border: 8px solid transparent;
-                        border-top-color: #00439e;
-
-                        /* Position */
-                        bottom: 100%;
-                        left: 50%;
-                        position: absolute;
-                        transform: translate(-50%, 8px);
-
-                        /* Zero size */
-                        height: 0;
-                        width: 0;
-
-                        /* Displayed on top of other element */
-                        z-index: 10;
-                    }
-
-                    .container__content {
-                        /* Invisible by default */
-                        opacity: 0;
-
-                        /* To prevent accidental interactions with other elements  */
-                        pointer-events: none;
-
-                        /* Background color, must be the same as the border color of arrow */
-                        background-color: #00439e;
-                        border-radius: 2px;
-
-                        /* Position */
-                        bottom: 100%;
-                        left: 50%;
-                        position: absolute;
-                        transform: translate(-50%, -8px);
-
-                        /* Displayed on top of other element */
-                        z-index: 10;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        className="p-tooltip"
-                        style={{
-                            marginBottom: '16px',
-                            width: '150px',
-                        }}
-                    >
-                        <div
-                            className="p-tooltip-content"
-                            style={{
-                                padding: '8px',
-                                width: '200px',
-                            }}
-                        >
-                            <Block backgroundColor="#fff" justify="center" numberOfBlocks={5} />
-                        </div>
-                        <div className="p-tooltip-arrow" />
-                        <Rectangle height={32} />
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.PopoverArrow]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/tooltip/Cover.tsx b/patterns/tooltip/Cover.tsx
deleted file mode 100644
index 20417e5..0000000
--- a/patterns/tooltip/Cover.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        position: 'relative',
-                        width: '60%',
-                    }}
-                >
-                    <div
-                        style={{
-                            border: '4px solid transparent',
-                            borderTopColor: '#00439e',
-                            bottom: '100%',
-                            height: 0,
-                            left: '50%',
-                            position: 'absolute',
-                            transform: 'translate(-50%, 4px)',
-                            width: 0,
-                        }}
-                    />
-                    <div
-                        style={{
-                            backgroundColor: '#00439e',
-                            borderRadius: '2px',
-                            bottom: '100%',
-                            height: '24px',
-                            left: '50%',
-                            position: 'absolute',
-                            transform: 'translate(-50%, -4px)',
-                            width: '80px',
-                        }}
-                    />
-                    <Rectangle height={16} />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 76b8604..86134eb 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -63,6 +63,7 @@
 @import './patterns/teardrop';
 @import './patterns/three-dimensions-card';
 @import './patterns/timeline';
+@import './patterns/tooltip';
 @import './patterns/tree-diagram';
 @import './patterns/triangle-buttons';
 @import './patterns/video-background';
diff --git a/styles/patterns/_tooltip.scss b/styles/patterns/_tooltip.scss
new file mode 100644
index 0000000..93d1bc8
--- /dev/null
+++ b/styles/patterns/_tooltip.scss
@@ -0,0 +1,66 @@
+.tooltip {
+    /* Used to position the arrow */
+    position: relative;
+
+    /* Demo */
+    width: 8rem;
+    height: 2rem;
+    border-radius: 0.25rem;
+    background: #d1d5db;
+}
+
+/* Show the arrow and content and restore pointer events when hovering the trigger element */
+.tooltip:hover .tooltip__arrow,
+.tooltip:hover .tooltip__content {
+    opacity: 1;
+    pointer-events: initial;
+}
+
+.tooltip__arrow {
+    /* Invisible by default */
+    opacity: 1;
+
+    /* To prevent accidental interactions with other elements  */
+    pointer-events: none;
+
+    /* Border */
+    border: 0.5rem solid transparent;
+    border-top-color: #111827;
+
+    /* Position */
+    bottom: 100%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, 8px);
+
+    /* Zero size */
+    height: 0;
+    width: 0;
+
+    /* Displayed on top of other element */
+    z-index: 10;
+}
+
+.tooltip__content {
+    /* Invisible by default */
+    opacity: 1;
+
+    /* To prevent accidental interactions with other elements  */
+    pointer-events: none;
+
+    /* Background color, must be the same as the border color of arrow */
+    background-color: #111827;
+    border-radius: 0.25rem;
+
+    /* Position */
+    bottom: 100%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, -8px);
+
+    /* Displayed on top of other element */
+    z-index: 10;
+
+    /* Demo */
+    width: 6rem;
+}
\ No newline at end of file