barecss-power/less/_tooltip.less

A classless CSS framework (power) http://barecss.com

@import (reference) "config";


// config
@tt-back: @def-text;
@tt-text: @def-back;
@tt-fontf: sans-serif;
@tt-font: 1rem;
@tt-radius: 1.5 * @radius-s;
@tt-padh: 1rem;
@tt-padv: 0.5rem;
@tt-opacity: 0.9;


// tooltip
// BUG: on <code> it is larger, but why?
[tt], [dtt]:disabled {
  // default
  &::after {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    transform: translate(-50%,-95%);
    visibility: hidden;
    opacity: 0;
    border-radius: @tt-radius;
    padding: @tt-padv @tt-padh;
    background: @tt-back;
    font: normal @tt-font @tt-fontf;
    color: @tt-text;
    text-transform: none;
    white-space: nowrap;
  }
  
  // on hover
  &:hover::after {
    transform: translate(-50%,~"calc(-100% - 5px)");
    visibility: visible;
    opacity: @tt-opacity;
  }
}


// sets the content for tooltip
// eg: <span tt="This is a tooltip"></span>
[tt]::after { content: attr(tt); }

// sets the content for disabled tooltips
// can be used in conjunction with title
// eg: <button disabled dtt="This button is disabled"></button>
[dtt]:disabled::after { content: attr(dtt); }