Component: Tooltip

docs/pages/components/tooltip.md

@@ -0,0 +1,51 @@
+---
+title: 'Components: Tooltip - Sloth.css'
+description: Additional information for elements on hover or focus
+tags: hover information details description top left right bottom neutral accent success alert
+---
+
+## Tooltip
+
+A tooltip provides additional information for an element on hover or focus.
+
+### Position
+
+Use the `data-tooltip` attribute on any element to attach a tooltip that appears above the element on hover or focus. Linebreaks can be used too.
+
+<div class="demo">
+  <button data-tooltip="Initiate self-destruction">I'm harmless</button>
+</div>
+
+```html
+<button data-tooltip="Initiate self-destruction">I'm harmless</button>
+```
+
+To change position, use the `tooltip-left`, `tooltip-bottom` or `tooltip-right` classes accordingly.
+
+<div class="demo">
+  <button class="tooltip-left" data-tooltip="I'm over here!">Left</button>
+  <button class="tooltip-bottom" data-tooltip="I'm over here!">Bottom</button>
+  <button class="tooltip-right" data-tooltip="I'm over here!">Right</button>
+</div>
+
+```html
+<button class="tooltip-left" data-tooltip="I'm over here!">Left</button>
+<button class="tooltip-bottom" data-tooltip="I'm over here!">Bottom</button>
+<button class="tooltip-right" data-tooltip="I'm over here!">Right</button>
+```
+
+### Colors
+
+Tooltips are neutral by default, but can have a different color using the `tooltip-accent`, `tooltip-success` or `tooltip-alert` classes.
+
+<div class="demo">
+  <button class="accent tooltip-accent" data-tooltip="I'm important!">Accent</button>
+  <button class="success tooltip-success" data-tooltip="I'm successful!">Success</button>
+  <button class="alert tooltip-alert" data-tooltip="I'm alarming!">Alert</button>
+</div>
+
+```html
+<button class="accent tooltip-accent" data-tooltip="I'm important!">Accent</button>
+<button class="success tooltip-success" data-tooltip="I'm successful!">Success</button>
+<button class="alert tooltip-alert" data-tooltip="I'm alarming!">Alert</button>
+```

src/_components.css

@@ -13,4 +13,4 @@
 /* @import 'components/_tab.css'; */
 @import 'components/_tag.css';
 @import 'components/_toast.css';
-/* @import 'components/_tooltip.css'; */
+@import 'components/_tooltip.css';

src/components/_tooltip.css

@@ -0,0 +1,76 @@
+[data-tooltip] {
+  position: relative;
+
+  &::after {
+    background-color: color-mix(in srgb, var(--color-text-base) 75%, transparent);
+    border-radius: var(--border-radius);
+    bottom: 100%;
+    color: var(--color-text-inverted);
+    content: attr(data-tooltip);
+    display: block;
+    left: 50%;
+    max-width: 12rem;
+    opacity: 0;
+    overflow: hidden;
+    padding: .5rem;
+    position: absolute;
+    text-overflow: ellipsis;
+    transform: translate(-50%, .25rem);
+    transition: var(--transition-transform), var(--transition-opacity);
+    white-space: pre;
+    z-index: 50;
+  }
+  &:focus::after,
+  &:hover::after {
+    opacity: 1;
+    transform: translate(-50%, -.25rem);
+  }
+
+  &.tooltip-right {
+    &::after {
+      bottom: 50%;
+      left: 100%;
+      transform: translate(-.25rem, 50%);
+    }
+    &:focus::after,
+    &:hover::after {
+      transform: translate(.25rem, 50%);
+    }
+  }
+  &.tooltip-bottom {
+    &::after {
+      bottom: auto;
+      top: 100%;
+      transform: translate(-50%, -.25rem);
+    }
+    &:focus::after,
+    &:hover::after {
+      transform: translate(-50%, .25rem);
+    }
+  }
+  &.tooltip-left {
+    &::after {
+      bottom: 50%;
+      left: auto;
+      right: 100%;
+      transform: translate(.25rem, 50%);
+    }
+    &:focus::after,
+    &:hover::after {
+      transform: translate(-.25rem, 50%);
+    }
+  }
+
+  &.tooltip-accent::after {
+    background-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
+    color: var(--color-text-dark);
+  }
+  &.tooltip-success::after {
+    background-color: color-mix(in srgb, var(--color-success) 50%, transparent);
+    color: var(--color-text-dark);
+  }
+  &.tooltip-alert::after {
+    background-color: color-mix(in srgb, var(--color-alert) 50%, transparent);
+    color: var(--color-text-dark);
+  }
+}