<!-- Standard -->
<div class="tooltip">
    <span class="tooltip__text">Das ist ein Tooltip!</span></div>

<!-- Helles Blau -->
<div class="tooltip tooltip--blue-light">
    <span class="tooltip__text">Das ist ein Tooltip!</span></div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  if (color) attr.class.push(`tooltip--${color}`);

.tooltip&attributes(attr)
  span.tooltip__text #{text}
/* Standard */
{
  "text": "Das ist ein Tooltip!"
}

/* Helles Blau */
{
  "text": "Das ist ein Tooltip!",
  "color": "blue-light"
}

  • Content:
    import h from 'hyperscript';
    
    export default ($element, { text, color, timeout }) => {
      const classes = color ? `tooltip.tooltip--${color}` : 'tooltip';
      const $tooltip = h('.tooltip__wrapper', h(`.${classes}`, text));
    
      $element.prepend($tooltip);
    
      const remove = () => {
        $element.removeChild($tooltip);
      };
    
      if (timeout && typeof timeout === 'number') {
        setTimeout(remove, timeout);
        return null;
      }
    
      return remove;
    };
    
  • URL: /components/raw/tooltip/tooltip.js
  • Filesystem Path: src/components/atoms/tooltip/tooltip.js
  • Size: 443 Bytes
  • Content:
    .tooltip {
      background-color: #fff;
      border: 2px solid currentColor;
      border-radius: 3px;
      color: $color-red;
      font-size: 1.4rem;
      font-weight: bold;
      line-height: 1;
      padding: calc(3.1rem / 2 - 2px) calc(3rem - 2px);
      position: relative;
      text-align: center;
      z-index: 99999;
    
      &::after {
        border-color: currentColor transparent transparent;
        border-style: solid;
        border-width: 12px 6px 0;
        content: '';
        height: 0;
        left: 1rem;
        position: absolute;
        top: 99%;
        width: 0;
      }
    }
    
    .tooltip--blue-light {
      color: $color-blue-light;
    }
    
    .tooltip__wrapper {
      position: absolute;
      transform: translate(0, -120%);
    }
    
  • URL: /components/raw/tooltip/tooltip.scss
  • Filesystem Path: src/components/atoms/tooltip/tooltip.scss
  • Size: 652 Bytes

There are no notes for this item.