github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/with-tooltip/layout.scss (about)

     1  %tooltip {
     2    position: relative;
     3    display: inline-flex;
     4    justify-content: center;
     5    align-items: center;
     6  }
     7  %tooltip-bubble,
     8  %tooltip-tail {
     9    position: absolute;
    10    z-index: 1;
    11  }
    12  %tooltip-bubble {
    13    padding: 10px;
    14    bottom: calc(100% + 5px);
    15    text-align: center;
    16    white-space: nowrap;
    17    content: attr(data-tooltip);
    18    // incase you are using text-indent to hide the
    19    // text of the element %with-tooltip
    20    text-indent: 0;
    21  }
    22  %tooltip-tail {
    23    content: '';
    24    left: 50%;
    25    margin-left: -10px;
    26    top: -10px;
    27    transform: scale(1, 0.5);
    28    width: 0;
    29    height: 0;
    30    background-color: transparent !important;
    31    border-left: 9px solid transparent;
    32    border-right: 9px solid transparent;
    33    border-top: 18px solid $ui-gray-800;
    34  }