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 @@ +
+
{% lines "hor", 5 %}
+
+
\ 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 %} 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 +
+ +
+ ... +
+ + +
+ + + ... +
+``` + +## 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 ( - - - - - - - -
- Move the mouser over the main element to see the tooltip. -
- - -
- ... -
- - -
- - - ... -
-`} - 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; - } - `} - > -
-
-
- -
-
- -
-
- - - - - ); -}; - -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 ( - -
-
-
-
- -
-
- - ); -}; - -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