PSI Software SE Design Library

Tooltip

No notes defined.

<!-- Default -->
<div class="tooltip" data-position="bottom right">

    <div class="tooltip-content">
        <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>

    </div>

</div>


<!-- With Link -->
<div class="tooltip" data-position="bottom right">

    <div class="tooltip-content">
        Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
    </div>

</div>


<!-- With Button -->
<div class="tooltip" data-position="bottom right">

    <div class="tooltip-content">
        <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>

    </div>

</div>


<!-- Documentation only -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gg); margin-top: var(--sp);">
    <div style="position: relative; width: 0;">
        <div class="tooltip" data-position="bottom right">

            <div class="tooltip-content">
                <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>

            </div>

        </div>

    </div>
    <div style="position: relative; width: 0;">
        <div class="tooltip" data-position="bottom right">

            <div class="tooltip-content">
                Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
            </div>

        </div>

    </div>
</div>


<!-- Default -->
<div class="tooltip{{#modifier}} {{.}}{{/modifier}}"{{#position}} data-position="{{.}}"{{/position}}>

    <div class="tooltip-content">
        {{{content}}}
    </div>

</div>

<!-- With Link -->
<div class="tooltip{{#modifier}} {{.}}{{/modifier}}"{{#position}} data-position="{{.}}"{{/position}}>

    <div class="tooltip-content">
        {{{content}}}
    </div>

</div>

<!-- With Button -->
<div class="tooltip{{#modifier}} {{.}}{{/modifier}}"{{#position}} data-position="{{.}}"{{/position}}>

    <div class="tooltip-content">
        {{{content}}}
    </div>

</div>

<!-- Documentation only -->
<div style="display: grid; grid-template-columns: repeat({{samples.length}}, 1fr); column-gap: var(--gg); margin-top: var(--sp);">
        {{#samples}}
    <div style="position: relative; width: 0;">
        {{#tooltip}}
            {{render '@tooltip' (contextData '@tooltip' this) merge=true}}
        {{/tooltip}}
    </div>
        {{/samples}}
</div>
 
/* Default */
{
  "content": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
  "position": "bottom right"
}


/* With Link */
{
  "content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>",
  "position": "bottom right"
}


/* With Button */
{
  "content": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
  "position": "bottom right",
  "buttongroup": {
    "buttons": [
      {
        "label": "Bestätigung"
      },
      {
        "modifier": "is-secondary",
        "label": "Abbrechen"
      }
    ]
  }
}


/* Documentation only */
{
  "content": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
  "position": "bottom right",
  "samples": [
    {
      "tooltip": {
        "content": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
        "position": "bottom right"
      }
    },
    {
      "tooltip": {
        "content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>",
        "position": "bottom right"
      }
    }
  ]
}
  • Content: 
    $tooltip_styles: (
    theme: dark,
    font-weight: bolder,
) !default;

@import "_tooltip.settings";
@import "_tooltip.styles";

%tooltip {

    &::before {
        box-shadow: 1px 1px 4px rgba($_box-shadow_color, .2);
    }

    &-content {
        @include border-radius(small);
        @include box-shadow(small);
    }

}
  • URL: /components/raw/tooltip/_tooltip.scss
  • Filesystem Path: components/02-elements/tooltip/_tooltip.scss
  • Size: 328 Bytes
  • Content: 
    $tooltip_font-size: smallest !default;
$tooltip_max-width: 30ch;

$tooltip_marker_width: 16px !default;

$tooltip_position_inset: 10% !default;
$tooltip_animation_offset: 16px !default;

$tooltip_styles: (
    theme: dark,
    font-weight: bolder,
) !default;
  • URL: /components/raw/tooltip/_tooltip.settings.scss
  • Filesystem Path: components/02-elements/tooltip/_tooltip.settings.scss
  • Size: 260 Bytes
  • Content: 
    %tooltip {
    $inset: $_box_padding--small;

    position: relative;
    z-index: 1;

    min-width: $tooltip_max-width; // Prevent content to be squeezed
    margin-top: (.5 * $tooltip_marker_width);

    text-align: left;

    @include styles($tooltip_styles);

    &::before { // Marker
        $size: ceil(math.div($tooltip_marker_width, math.sqrt(2)));

        content: "";

        display: block;
        width: $size; height: $size;

        position: absolute;
        bottom: 100%;
        left: (-.5 * $tooltip_marker_width);
        z-index: -1;

        transform-origin: bottom left;
        transform: rotate(45deg);

        background-color: var(--background-color, black);
    }

    a {
        @extend %link;
    }

    &-content {
        position: absolute;
        transform: translateX(-50%);

        max-width: $tooltip_max-width;

        @include box-padding(small);
        background-color: var(--background-color, black);

        @include font-size($tooltip_font-size);

        > *:first-child {
            margin-top: 0 !important;
        }

    }

    &[data-position~="left"] &-content {
        left: (.5 * $tooltip_marker_width);
        margin-left: $inset;
        transform: translateX(-100%);
    }

    &[data-position~="right"] &-content {
        left: (-.5 * $tooltip_marker_width);
        margin-left: (-1 * $inset);
        transform: none;
    }

    &[data-position~="top"] {
        margin-top: (-.5 * $tooltip_marker_width);
    }

    &[data-position~="top"] &-content {
        transform: translateY(-100%);
    }

    &[data-position~="top"][data-position~="center"] &-content {
        transform: translateX(-50%) translateY(-100%);
    }

    &[data-position~="top"][data-position~="left"] &-content {
        transform: translateX(-100%) translateY(-100%);
    }

    &[data-position~="center"][data-position~="left"] {
        margin-top: 0;
        margin-left: (-1 * $tooltip_marker_width);
    }

    &[data-position~="center"][data-position~="left"] &-content {
        transform: translateX(-100%) translateY(-50%);
        left: auto;
        margin-left: auto;
    }

    &[data-position~="center"][data-position~="right"] {
        margin-top: 0;
        margin-left: $tooltip_marker_width;
    }

    &[data-position~="center"][data-position~="right"] &-content {
        transform: translateY(-50%);
        left: auto;
        margin-left: auto;
    }

}

.tooltip {
    @extend %tooltip;

    &-content {
        @extend %tooltip-content;
    }

}
  • URL: /components/raw/tooltip/_tooltip.styles.scss
  • Filesystem Path: components/02-elements/tooltip/_tooltip.styles.scss
  • Size: 2.5 KB