Merge pull request #92 from phuoc-ng/tooltip

Add tooltip pattern

client/constants/Pattern.ts

@@ -64,6 +64,7 @@ enum Pattern {
     Tab = 'Tab',
     Timeline = 'Timeline',
     TogglePasswordVisibility = 'Toggle password visibility',
+    Tooltip = 'Tooltip',
     UploadButton = 'Upload button',
     ValidationIcon = 'Validation icon',
     VideoBackground = 'Video background',

client/pages/ExplorePage.tsx

@@ -173,6 +173,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.RadialProgressBar} />
                         <CoverCard pattern={Pattern.ResizableElement} />
                         <CoverCard pattern={Pattern.PresenceIndicator} />
+                        <CoverCard pattern={Pattern.Tooltip} />
                         <CoverCard pattern={Pattern.ValidationIcon} />
                     </div>
                 </section>

client/patterns/popover-arrow/Details.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
@@ -421,6 +423,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.Tooltip]} />
         </DetailsLayout>
     );
 };

client/patterns/tooltip/Cover.tsx

@@ -0,0 +1,58 @@
+import 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,
+                            zIndex: 10,
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: '#00439e',
+                            borderRadius: '2px',
+                            bottom: '100%',
+                            height: '24px',
+                            left: '50%',
+                            position: 'absolute',
+                            transform: 'translate(-50%, -4px)',
+                            width: '80px',
+                            zIndex: 10,
+                        }}
+                    />
+                    <Rectangle height={16} />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/tooltip/Details.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+
+import './tooltip.css';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Tooltip">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    Move the mouser over the main element to see the tooltip.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <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>
+                    )}
+                    source={`
+<style>
+.p-tooltip {
+    /* Used to position the arrow */
+    position: relative;
+}
+
+/* Show the arrow and content when hovering the trigger element */
+.p-tooltip:hover .p-tooltip-arrow,
+.p-tooltip:hover .p-tooltip-content {
+    opacity: 1;
+}
+
+.p-tooltip-arrow {
+    /* Invisible by default */
+    opacity: 0;
+
+    /* 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;
+}
+
+.p-tooltip-content {
+    /* Invisible by default */
+    opacity: 0;
+
+    /* 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;
+}
+</style>
+
+<div class="p-tooltip">
+    <!-- The tooltip content -->
+    <div class="p-tooltip-content">
+        ...
+    </div>
+
+    <!-- The tooltip arrow -->
+    <div class="p-tooltip-arrow" />
+
+    <!-- The trigger element -->
+    ...
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.PopoverArrow]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/tooltip/tooltip.css

@@ -0,0 +1,29 @@
+.p-tooltip {
+    position: relative;
+}
+.p-tooltip:hover .p-tooltip-arrow,
+.p-tooltip:hover .p-tooltip-content {
+    opacity: 1;
+}
+.p-tooltip-arrow {
+    border: 8px solid transparent;
+    border-top-color: #00439e;
+    bottom: 100%;
+    height: 0;
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    transform: translate(-50%, 8px);
+    width: 0;
+    z-index: 10;
+}
+.p-tooltip-content {
+    background-color: #00439e;
+    border-radius: 2px;
+    bottom: 100%;
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    transform: translate(-50%, -8px);
+    z-index: 10;
+}

public/sitemap.xml

@@ -65,6 +65,7 @@
     <url><loc>https://csslayout.io/patterns/tab</loc></url>
     <url><loc>https://csslayout.io/patterns/timeline</loc></url>
     <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
+    <url><loc>https://csslayout.io/patterns/tooltip</loc></url>
     <url><loc>https://csslayout.io/patterns/upload-button</loc></url>
     <url><loc>https://csslayout.io/patterns/validation-icon</loc></url>
     <url><loc>https://csslayout.io/patterns/video-background</loc></url>