cooltipz-css/cooltipz.css

Cooltipz.css is a pure CSS tooltip library that is lightweight, modern, accessible, customisable and easy to use

/*! Cooltipz.css v2.3.0 | MIT License | github.com/jackdomleo7/Cooltipz.css */
/* stylelint-disable-next-line length-zero-no-unit */
:root {
  --cooltipz-bg-color: #1f1f1f;
  --cooltipz-border-width: 0;
  --cooltipz-border-style: solid;
  --cooltipz-border-color: #1f1f1f;
  --cooltipz-text-color: #fff;
  --cooltipz-font-size: 0.75rem;
  --cooltipz-font-family: verdana, geneva, tahoma, var(--cooltipz-fontawesome, Arial), sans-serif;
  --cooltipz-slide: 6px;
  --cooltipz-border-radius: 0.125rem;
  --cooltipz-timing: 120ms;
  --cooltipz-cursor: pointer;
  --cooltipz-small: 6.25rem;
  --cooltipz-medium: 12.5rem;
  --cooltipz-large: 18.75rem;
  --cooltipz-arrow-size: 0.3125rem;
  --cooltipz-arrow-offset: 0px;
  --cooltipz-delay-show: 0s;
  --cooltipz-delay-hide: 0s;
}

[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]::before, [aria-label][data-cooltipz-dir].cooltipz--left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=left]::before, [aria-label][class*=cooltipz].cooltipz--left::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=right]::before, [aria-label][data-cooltipz-dir].cooltipz--right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=right]::before, [aria-label][class*=cooltipz].cooltipz--right::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]::before, [aria-label][class*=cooltipz].cooltipz--bottom::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]::before, [aria-label][class*=cooltipz].cooltipz--bottom-left::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]::before, [aria-label][class*=cooltipz].cooltipz--bottom-right::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top]::before, [aria-label][data-cooltipz-dir].cooltipz--top::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top]::before, [aria-label][class*=cooltipz].cooltipz--top::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]::before, [aria-label][data-cooltipz-dir].cooltipz--top-left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]::before, [aria-label][class*=cooltipz].cooltipz--top-left::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]::before, [aria-label][data-cooltipz-dir].cooltipz--top-right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]::before, [aria-label][class*=cooltipz].cooltipz--top-right::before {
  border: var(--cooltipz-arrow-size, 0.3125rem) solid transparent;
  height: 0;
  width: 0;
}

[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]::before, [aria-label][data-cooltipz-dir].cooltipz--top::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top]::before, [aria-label][class*=cooltipz].cooltipz--top::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]::before, [aria-label][data-cooltipz-dir].cooltipz--top-left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]::before, [aria-label][class*=cooltipz].cooltipz--top-left::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]::before, [aria-label][data-cooltipz-dir].cooltipz--top-right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]::before, [aria-label][class*=cooltipz].cooltipz--top-right::before {
  border-top-color: var(--cooltipz-border-color, #1f1f1f);
  -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]::before, [aria-label][class*=cooltipz].cooltipz--bottom::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]::before, [aria-label][class*=cooltipz].cooltipz--bottom-left::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]::before, [aria-label][class*=cooltipz].cooltipz--bottom-right::before {
  border-bottom-color: var(--cooltipz-border-color, #1f1f1f);
  -webkit-filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.3));
}

[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]::before, [aria-label][data-cooltipz-dir].cooltipz--right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=right]::before, [aria-label][class*=cooltipz].cooltipz--right::before {
  border-right-color: var(--cooltipz-border-color, #1f1f1f);
  -webkit-filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.3));
}

[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]::before, [aria-label][data-cooltipz-dir].cooltipz--left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=left]::before, [aria-label][class*=cooltipz].cooltipz--left::before {
  border-left-color: var(--cooltipz-border-color, #1f1f1f);
  -webkit-filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.3));
}

[aria-label][data-cooltipz-dir][data-cooltipz-size=fit]::after, [aria-label][data-cooltipz-dir].cooltipz--fit::after, [aria-label][class*=cooltipz][data-cooltipz-size=fit]::after, [aria-label][class*=cooltipz].cooltipz--fit::after, [aria-label][data-cooltipz-dir][data-cooltipz-size=small]::after, [aria-label][data-cooltipz-dir].cooltipz--small::after, [aria-label][class*=cooltipz][data-cooltipz-size=small]::after, [aria-label][class*=cooltipz].cooltipz--small::after, [aria-label][data-cooltipz-dir][data-cooltipz-size=medium]::after, [aria-label][data-cooltipz-dir].cooltipz--medium::after, [aria-label][class*=cooltipz][data-cooltipz-size=medium]::after, [aria-label][class*=cooltipz].cooltipz--medium::after, [aria-label][data-cooltipz-dir][data-cooltipz-size=large]::after, [aria-label][data-cooltipz-dir].cooltipz--large::after, [aria-label][class*=cooltipz][data-cooltipz-size=large]::after, [aria-label][class*=cooltipz].cooltipz--large::after {
  white-space: normal;
  word-wrap: break-word;
}

/*
::before = arrow
::after = tooltip box and content
*/
[aria-label][data-cooltipz-dir], [aria-label][class*=cooltipz] {
  cursor: var(--cooltipz-cursor, pointer);
  position: relative;
}
[aria-label][data-cooltipz-dir]::after, [aria-label][class*=cooltipz]::after {
  background-color: var(--cooltipz-bg-color, #1f1f1f);
  border-radius: var(--cooltipz-border-radius, 0.125rem);
  border: var(--cooltipz-border-width, 0) var(--cooltipz-border-style, solid) var(--cooltipz-border-color, #1f1f1f);
  -webkit-box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.3);
  color: var(--cooltipz-text-color, #fff);
  content: attr(aria-label);
  font-family: var(--cooltipz-font-family, verdana, geneva, tahoma, var(--cooltipz-fontawesome, Arial), sans-serif);
  font-size: var(--cooltipz-font-size, 0.75rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: 400;
  padding: 0.5em 1em;
  text-indent: 0;
  text-shadow: none;
  white-space: nowrap;
  z-index: 10;
}
[aria-label][data-cooltipz-dir]::before, [aria-label][class*=cooltipz]::before {
  content: "";
  z-index: 11;
}
[aria-label][data-cooltipz-dir]::after, [aria-label][data-cooltipz-dir]::before, [aria-label][class*=cooltipz]::after, [aria-label][class*=cooltipz]::before {
  -webkit-transition: all var(--cooltipz-timing, 120ms) ease-out var(--cooltipz-timing, 120ms);
  transition: all var(--cooltipz-timing, 120ms) ease-out var(--cooltipz-timing, 120ms);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  -webkit-transition-delay: var(--cooltipz-delay-hide, 0s);
          transition-delay: var(--cooltipz-delay-hide, 0s);
}
@media (prefers-reduced-motion: reduce) {
  [aria-label][data-cooltipz-dir]::after, [aria-label][data-cooltipz-dir]::before, [aria-label][class*=cooltipz]::after, [aria-label][class*=cooltipz]::before {
    -webkit-transition: none;
    transition: none;
  }
}
[aria-label][data-cooltipz-dir]:hover::before, [aria-label][data-cooltipz-dir]:hover::after, [aria-label][data-cooltipz-dir]:focus::before, [aria-label][data-cooltipz-dir]:focus::after, [aria-label][data-cooltipz-dir][data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir][data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir].cooltipz--visible::before, [aria-label][data-cooltipz-dir].cooltipz--visible::after, [aria-label][class*=cooltipz]:hover::before, [aria-label][class*=cooltipz]:hover::after, [aria-label][class*=cooltipz]:focus::before, [aria-label][class*=cooltipz]:focus::after, [aria-label][class*=cooltipz][data-cooltipz-visible]::before, [aria-label][class*=cooltipz][data-cooltipz-visible]::after, [aria-label][class*=cooltipz].cooltipz--visible::before, [aria-label][class*=cooltipz].cooltipz--visible::after {
  opacity: 1;
  -webkit-transition-delay: var(--cooltipz-delay-show, 0s);
          transition-delay: var(--cooltipz-delay-show, 0s);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]::after, [aria-label][data-cooltipz-dir].cooltipz--top::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top]::after, [aria-label][class*=cooltipz].cooltipz--top::after {
  margin-bottom: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
  -webkit-transform: translate(-50%, var(--cooltipz-slide, 6px));
          transform: translate(-50%, var(--cooltipz-slide, 6px));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]::before, [aria-label][data-cooltipz-dir].cooltipz--top::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top]::before, [aria-label][class*=cooltipz].cooltipz--top::before {
  -webkit-transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), var(--cooltipz-slide, 6px));
          transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), var(--cooltipz-slide, 6px));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top]::before, [aria-label][data-cooltipz-dir].cooltipz--top::after, [aria-label][data-cooltipz-dir].cooltipz--top::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top]::before, [aria-label][class*=cooltipz].cooltipz--top::after, [aria-label][class*=cooltipz].cooltipz--top::before {
  bottom: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
  left: 50%;
  -webkit-transform-origin: top;
          transform-origin: top;
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:hover::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:focus::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top][data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top].cooltipz--visible::before, [aria-label][data-cooltipz-dir].cooltipz--top:hover::before, [aria-label][data-cooltipz-dir].cooltipz--top:focus::before, [aria-label][data-cooltipz-dir].cooltipz--top[data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir].cooltipz--top.cooltipz--visible::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top]:hover::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top]:focus::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top][data-cooltipz-visible]::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top].cooltipz--visible::before, [aria-label][class*=cooltipz].cooltipz--top:hover::before, [aria-label][class*=cooltipz].cooltipz--top:focus::before, [aria-label][class*=cooltipz].cooltipz--top[data-cooltipz-visible]::before, [aria-label][class*=cooltipz].cooltipz--top.cooltipz--visible::before {
  -webkit-transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), 0);
          transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), 0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:hover::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:focus::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top][data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top].cooltipz--visible::after, [aria-label][data-cooltipz-dir].cooltipz--top:hover::after, [aria-label][data-cooltipz-dir].cooltipz--top:focus::after, [aria-label][data-cooltipz-dir].cooltipz--top[data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir].cooltipz--top.cooltipz--visible::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top]:hover::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top]:focus::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top][data-cooltipz-visible]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top].cooltipz--visible::after, [aria-label][class*=cooltipz].cooltipz--top:hover::after, [aria-label][class*=cooltipz].cooltipz--top:focus::after, [aria-label][class*=cooltipz].cooltipz--top[data-cooltipz-visible]::after, [aria-label][class*=cooltipz].cooltipz--top.cooltipz--visible::after {
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]::after, [aria-label][data-cooltipz-dir].cooltipz--top-left::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]::after, [aria-label][class*=cooltipz].cooltipz--top-left::after {
  left: 0;
  margin-bottom: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
  -webkit-transform: translate(0, var(--cooltipz-slide, 6px));
          transform: translate(0, var(--cooltipz-slide, 6px));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]::before, [aria-label][data-cooltipz-dir].cooltipz--top-left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]::before, [aria-label][class*=cooltipz].cooltipz--top-left::before {
  left: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
  -webkit-transform: translate(var(--cooltipz-arrow-offset, 0px), var(--cooltipz-slide, 6px));
          transform: translate(var(--cooltipz-arrow-offset, 0px), var(--cooltipz-slide, 6px));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]::before, [aria-label][data-cooltipz-dir].cooltipz--top-left::after, [aria-label][data-cooltipz-dir].cooltipz--top-left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]::before, [aria-label][class*=cooltipz].cooltipz--top-left::after, [aria-label][class*=cooltipz].cooltipz--top-left::before {
  bottom: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
  -webkit-transform-origin: top;
          transform-origin: top;
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:hover::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:focus::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left][data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left].cooltipz--visible::before, [aria-label][data-cooltipz-dir].cooltipz--top-left:hover::before, [aria-label][data-cooltipz-dir].cooltipz--top-left:focus::before, [aria-label][data-cooltipz-dir].cooltipz--top-left[data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir].cooltipz--top-left.cooltipz--visible::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:hover::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:focus::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left][data-cooltipz-visible]::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left].cooltipz--visible::before, [aria-label][class*=cooltipz].cooltipz--top-left:hover::before, [aria-label][class*=cooltipz].cooltipz--top-left:focus::before, [aria-label][class*=cooltipz].cooltipz--top-left[data-cooltipz-visible]::before, [aria-label][class*=cooltipz].cooltipz--top-left.cooltipz--visible::before {
  -webkit-transform: translate(var(--cooltipz-arrow-offset, 0px), 0);
          transform: translate(var(--cooltipz-arrow-offset, 0px), 0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:hover::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:focus::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left][data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left].cooltipz--visible::after, [aria-label][data-cooltipz-dir].cooltipz--top-left:hover::after, [aria-label][data-cooltipz-dir].cooltipz--top-left:focus::after, [aria-label][data-cooltipz-dir].cooltipz--top-left[data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir].cooltipz--top-left.cooltipz--visible::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:hover::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:focus::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left][data-cooltipz-visible]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-left].cooltipz--visible::after, [aria-label][class*=cooltipz].cooltipz--top-left:hover::after, [aria-label][class*=cooltipz].cooltipz--top-left:focus::after, [aria-label][class*=cooltipz].cooltipz--top-left[data-cooltipz-visible]::after, [aria-label][class*=cooltipz].cooltipz--top-left.cooltipz--visible::after {
  -webkit-transform: translate(0);
          transform: translate(0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]::after, [aria-label][data-cooltipz-dir].cooltipz--top-right::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]::after, [aria-label][class*=cooltipz].cooltipz--top-right::after {
  margin-bottom: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
  right: 0;
  -webkit-transform: translate(0, var(--cooltipz-slide, 6px));
          transform: translate(0, var(--cooltipz-slide, 6px));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]::before, [aria-label][data-cooltipz-dir].cooltipz--top-right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]::before, [aria-label][class*=cooltipz].cooltipz--top-right::before {
  right: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
  -webkit-transform: translate(var(--cooltipz-arrow-offset, 0px), var(--cooltipz-slide, 6px));
          transform: translate(var(--cooltipz-arrow-offset, 0px), var(--cooltipz-slide, 6px));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]::before, [aria-label][data-cooltipz-dir].cooltipz--top-right::after, [aria-label][data-cooltipz-dir].cooltipz--top-right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]::before, [aria-label][class*=cooltipz].cooltipz--top-right::after, [aria-label][class*=cooltipz].cooltipz--top-right::before {
  bottom: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
  -webkit-transform-origin: top;
          transform-origin: top;
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:hover::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:focus::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right][data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right].cooltipz--visible::before, [aria-label][data-cooltipz-dir].cooltipz--top-right:hover::before, [aria-label][data-cooltipz-dir].cooltipz--top-right:focus::before, [aria-label][data-cooltipz-dir].cooltipz--top-right[data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir].cooltipz--top-right.cooltipz--visible::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:hover::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:focus::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right][data-cooltipz-visible]::before, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right].cooltipz--visible::before, [aria-label][class*=cooltipz].cooltipz--top-right:hover::before, [aria-label][class*=cooltipz].cooltipz--top-right:focus::before, [aria-label][class*=cooltipz].cooltipz--top-right[data-cooltipz-visible]::before, [aria-label][class*=cooltipz].cooltipz--top-right.cooltipz--visible::before {
  -webkit-transform: translate(var(--cooltipz-arrow-offset, 0px), 0);
          transform: translate(var(--cooltipz-arrow-offset, 0px), 0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:hover::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:focus::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right][data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right].cooltipz--visible::after, [aria-label][data-cooltipz-dir].cooltipz--top-right:hover::after, [aria-label][data-cooltipz-dir].cooltipz--top-right:focus::after, [aria-label][data-cooltipz-dir].cooltipz--top-right[data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir].cooltipz--top-right.cooltipz--visible::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:hover::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:focus::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right][data-cooltipz-visible]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=top-right].cooltipz--visible::after, [aria-label][class*=cooltipz].cooltipz--top-right:hover::after, [aria-label][class*=cooltipz].cooltipz--top-right:focus::after, [aria-label][class*=cooltipz].cooltipz--top-right[data-cooltipz-visible]::after, [aria-label][class*=cooltipz].cooltipz--top-right.cooltipz--visible::after {
  -webkit-transform: translate(0);
          transform: translate(0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]::after, [aria-label][data-cooltipz-dir].cooltipz--bottom::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]::after, [aria-label][class*=cooltipz].cooltipz--bottom::after {
  margin-top: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
  -webkit-transform: translate(-50%, calc(var(--cooltipz-slide, 6px) * -1));
          transform: translate(-50%, calc(var(--cooltipz-slide, 6px) * -1));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]::before, [aria-label][class*=cooltipz].cooltipz--bottom::before {
  -webkit-transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), calc(var(--cooltipz-slide, 6px) * -1));
          transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), calc(var(--cooltipz-slide, 6px) * -1));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom::after, [aria-label][data-cooltipz-dir].cooltipz--bottom::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]::before, [aria-label][class*=cooltipz].cooltipz--bottom::after, [aria-label][class*=cooltipz].cooltipz--bottom::before {
  left: 50%;
  top: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:hover::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:focus::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom][data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom].cooltipz--visible::before, [aria-label][data-cooltipz-dir].cooltipz--bottom:hover::before, [aria-label][data-cooltipz-dir].cooltipz--bottom:focus::before, [aria-label][data-cooltipz-dir].cooltipz--bottom[data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom.cooltipz--visible::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:hover::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:focus::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom][data-cooltipz-visible]::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom].cooltipz--visible::before, [aria-label][class*=cooltipz].cooltipz--bottom:hover::before, [aria-label][class*=cooltipz].cooltipz--bottom:focus::before, [aria-label][class*=cooltipz].cooltipz--bottom[data-cooltipz-visible]::before, [aria-label][class*=cooltipz].cooltipz--bottom.cooltipz--visible::before {
  -webkit-transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), 0);
          transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), 0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:hover::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:focus::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom][data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom].cooltipz--visible::after, [aria-label][data-cooltipz-dir].cooltipz--bottom:hover::after, [aria-label][data-cooltipz-dir].cooltipz--bottom:focus::after, [aria-label][data-cooltipz-dir].cooltipz--bottom[data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir].cooltipz--bottom.cooltipz--visible::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:hover::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:focus::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom][data-cooltipz-visible]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom].cooltipz--visible::after, [aria-label][class*=cooltipz].cooltipz--bottom:hover::after, [aria-label][class*=cooltipz].cooltipz--bottom:focus::after, [aria-label][class*=cooltipz].cooltipz--bottom[data-cooltipz-visible]::after, [aria-label][class*=cooltipz].cooltipz--bottom.cooltipz--visible::after {
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-left::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]::after, [aria-label][class*=cooltipz].cooltipz--bottom-left::after {
  left: 0;
  margin-top: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
  -webkit-transform: translate(0, calc(var(--cooltipz-slide, 6px) * -1));
          transform: translate(0, calc(var(--cooltipz-slide, 6px) * -1));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]::before, [aria-label][class*=cooltipz].cooltipz--bottom-left::before {
  left: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
  -webkit-transform: translate(var(--cooltipz-arrow-offset, 0px), calc(var(--cooltipz-slide, 6px) * -1));
          transform: translate(var(--cooltipz-arrow-offset, 0px), calc(var(--cooltipz-slide, 6px) * -1));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-left::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]::before, [aria-label][class*=cooltipz].cooltipz--bottom-left::after, [aria-label][class*=cooltipz].cooltipz--bottom-left::before {
  top: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:hover::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:focus::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left][data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left].cooltipz--visible::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-left:hover::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-left:focus::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-left[data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-left.cooltipz--visible::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:hover::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:focus::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left][data-cooltipz-visible]::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left].cooltipz--visible::before, [aria-label][class*=cooltipz].cooltipz--bottom-left:hover::before, [aria-label][class*=cooltipz].cooltipz--bottom-left:focus::before, [aria-label][class*=cooltipz].cooltipz--bottom-left[data-cooltipz-visible]::before, [aria-label][class*=cooltipz].cooltipz--bottom-left.cooltipz--visible::before {
  -webkit-transform: translate(var(--cooltipz-arrow-offset, 0px), 0);
          transform: translate(var(--cooltipz-arrow-offset, 0px), 0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:hover::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:focus::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left][data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left].cooltipz--visible::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-left:hover::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-left:focus::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-left[data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-left.cooltipz--visible::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:hover::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:focus::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left][data-cooltipz-visible]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left].cooltipz--visible::after, [aria-label][class*=cooltipz].cooltipz--bottom-left:hover::after, [aria-label][class*=cooltipz].cooltipz--bottom-left:focus::after, [aria-label][class*=cooltipz].cooltipz--bottom-left[data-cooltipz-visible]::after, [aria-label][class*=cooltipz].cooltipz--bottom-left.cooltipz--visible::after {
  -webkit-transform: translate(0);
          transform: translate(0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-right::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]::after, [aria-label][class*=cooltipz].cooltipz--bottom-right::after {
  margin-top: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
  right: 0;
  -webkit-transform: translate(0, calc(var(--cooltipz-slide, 6px) * -1));
          transform: translate(0, calc(var(--cooltipz-slide, 6px) * -1));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]::before, [aria-label][class*=cooltipz].cooltipz--bottom-right::before {
  right: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
  -webkit-transform: translate(var(--cooltipz-arrow-offset, 0px), calc(var(--cooltipz-slide, 6px) * -1));
          transform: translate(var(--cooltipz-arrow-offset, 0px), calc(var(--cooltipz-slide, 6px) * -1));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-right::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]::before, [aria-label][class*=cooltipz].cooltipz--bottom-right::after, [aria-label][class*=cooltipz].cooltipz--bottom-right::before {
  top: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:hover::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:focus::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right][data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right].cooltipz--visible::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-right:hover::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-right:focus::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-right[data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir].cooltipz--bottom-right.cooltipz--visible::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:hover::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:focus::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right][data-cooltipz-visible]::before, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right].cooltipz--visible::before, [aria-label][class*=cooltipz].cooltipz--bottom-right:hover::before, [aria-label][class*=cooltipz].cooltipz--bottom-right:focus::before, [aria-label][class*=cooltipz].cooltipz--bottom-right[data-cooltipz-visible]::before, [aria-label][class*=cooltipz].cooltipz--bottom-right.cooltipz--visible::before {
  -webkit-transform: translate(var(--cooltipz-arrow-offset, 0px), 0);
          transform: translate(var(--cooltipz-arrow-offset, 0px), 0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:hover::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:focus::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right][data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right].cooltipz--visible::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-right:hover::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-right:focus::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-right[data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir].cooltipz--bottom-right.cooltipz--visible::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:hover::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:focus::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right][data-cooltipz-visible]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right].cooltipz--visible::after, [aria-label][class*=cooltipz].cooltipz--bottom-right:hover::after, [aria-label][class*=cooltipz].cooltipz--bottom-right:focus::after, [aria-label][class*=cooltipz].cooltipz--bottom-right[data-cooltipz-visible]::after, [aria-label][class*=cooltipz].cooltipz--bottom-right.cooltipz--visible::after {
  -webkit-transform: translate(0);
          transform: translate(0);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]::after, [aria-label][data-cooltipz-dir].cooltipz--left::after, [aria-label][class*=cooltipz][data-cooltipz-dir=left]::after, [aria-label][class*=cooltipz].cooltipz--left::after {
  margin-right: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
  -webkit-transform: translate(var(--cooltipz-slide, 6px), -50%);
          transform: translate(var(--cooltipz-slide, 6px), -50%);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]::before, [aria-label][data-cooltipz-dir].cooltipz--left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=left]::before, [aria-label][class*=cooltipz].cooltipz--left::before {
  -webkit-transform: translate(var(--cooltipz-slide, 6px), calc(-50% + var(--cooltipz-arrow-offset, 0px)));
          transform: translate(var(--cooltipz-slide, 6px), calc(-50% + var(--cooltipz-arrow-offset, 0px)));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=left]::before, [aria-label][data-cooltipz-dir].cooltipz--left::after, [aria-label][data-cooltipz-dir].cooltipz--left::before, [aria-label][class*=cooltipz][data-cooltipz-dir=left]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=left]::before, [aria-label][class*=cooltipz].cooltipz--left::after, [aria-label][class*=cooltipz].cooltipz--left::before {
  right: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
  top: 50%;
  -webkit-transform-origin: left;
          transform-origin: left;
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:hover::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:focus::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=left][data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=left].cooltipz--visible::before, [aria-label][data-cooltipz-dir].cooltipz--left:hover::before, [aria-label][data-cooltipz-dir].cooltipz--left:focus::before, [aria-label][data-cooltipz-dir].cooltipz--left[data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir].cooltipz--left.cooltipz--visible::before, [aria-label][class*=cooltipz][data-cooltipz-dir=left]:hover::before, [aria-label][class*=cooltipz][data-cooltipz-dir=left]:focus::before, [aria-label][class*=cooltipz][data-cooltipz-dir=left][data-cooltipz-visible]::before, [aria-label][class*=cooltipz][data-cooltipz-dir=left].cooltipz--visible::before, [aria-label][class*=cooltipz].cooltipz--left:hover::before, [aria-label][class*=cooltipz].cooltipz--left:focus::before, [aria-label][class*=cooltipz].cooltipz--left[data-cooltipz-visible]::before, [aria-label][class*=cooltipz].cooltipz--left.cooltipz--visible::before {
  -webkit-transform: translate(0, calc(-50% + var(--cooltipz-arrow-offset, 0px)));
          transform: translate(0, calc(-50% + var(--cooltipz-arrow-offset, 0px)));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:hover::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:focus::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=left][data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=left].cooltipz--visible::after, [aria-label][data-cooltipz-dir].cooltipz--left:hover::after, [aria-label][data-cooltipz-dir].cooltipz--left:focus::after, [aria-label][data-cooltipz-dir].cooltipz--left[data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir].cooltipz--left.cooltipz--visible::after, [aria-label][class*=cooltipz][data-cooltipz-dir=left]:hover::after, [aria-label][class*=cooltipz][data-cooltipz-dir=left]:focus::after, [aria-label][class*=cooltipz][data-cooltipz-dir=left][data-cooltipz-visible]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=left].cooltipz--visible::after, [aria-label][class*=cooltipz].cooltipz--left:hover::after, [aria-label][class*=cooltipz].cooltipz--left:focus::after, [aria-label][class*=cooltipz].cooltipz--left[data-cooltipz-visible]::after, [aria-label][class*=cooltipz].cooltipz--left.cooltipz--visible::after {
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]::after, [aria-label][data-cooltipz-dir].cooltipz--right::after, [aria-label][class*=cooltipz][data-cooltipz-dir=right]::after, [aria-label][class*=cooltipz].cooltipz--right::after {
  margin-left: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
  -webkit-transform: translate(calc(var(--cooltipz-slide, 6px) * -1), -50%);
          transform: translate(calc(var(--cooltipz-slide, 6px) * -1), -50%);
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]::before, [aria-label][data-cooltipz-dir].cooltipz--right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=right]::before, [aria-label][class*=cooltipz].cooltipz--right::before {
  -webkit-transform: translate(calc(var(--cooltipz-slide, 6px) * -1), calc(-50% + var(--cooltipz-arrow-offset, 0px)));
          transform: translate(calc(var(--cooltipz-slide, 6px) * -1), calc(-50% + var(--cooltipz-arrow-offset, 0px)));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=right]::before, [aria-label][data-cooltipz-dir].cooltipz--right::after, [aria-label][data-cooltipz-dir].cooltipz--right::before, [aria-label][class*=cooltipz][data-cooltipz-dir=right]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=right]::before, [aria-label][class*=cooltipz].cooltipz--right::after, [aria-label][class*=cooltipz].cooltipz--right::before {
  left: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
  top: 50%;
  -webkit-transform-origin: right;
          transform-origin: right;
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:hover::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:focus::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=right][data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir][data-cooltipz-dir=right].cooltipz--visible::before, [aria-label][data-cooltipz-dir].cooltipz--right:hover::before, [aria-label][data-cooltipz-dir].cooltipz--right:focus::before, [aria-label][data-cooltipz-dir].cooltipz--right[data-cooltipz-visible]::before, [aria-label][data-cooltipz-dir].cooltipz--right.cooltipz--visible::before, [aria-label][class*=cooltipz][data-cooltipz-dir=right]:hover::before, [aria-label][class*=cooltipz][data-cooltipz-dir=right]:focus::before, [aria-label][class*=cooltipz][data-cooltipz-dir=right][data-cooltipz-visible]::before, [aria-label][class*=cooltipz][data-cooltipz-dir=right].cooltipz--visible::before, [aria-label][class*=cooltipz].cooltipz--right:hover::before, [aria-label][class*=cooltipz].cooltipz--right:focus::before, [aria-label][class*=cooltipz].cooltipz--right[data-cooltipz-visible]::before, [aria-label][class*=cooltipz].cooltipz--right.cooltipz--visible::before {
  -webkit-transform: translate(0, calc(-50% + var(--cooltipz-arrow-offset, 0px)));
          transform: translate(0, calc(-50% + var(--cooltipz-arrow-offset, 0px)));
}
[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:hover::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:focus::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=right][data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir][data-cooltipz-dir=right].cooltipz--visible::after, [aria-label][data-cooltipz-dir].cooltipz--right:hover::after, [aria-label][data-cooltipz-dir].cooltipz--right:focus::after, [aria-label][data-cooltipz-dir].cooltipz--right[data-cooltipz-visible]::after, [aria-label][data-cooltipz-dir].cooltipz--right.cooltipz--visible::after, [aria-label][class*=cooltipz][data-cooltipz-dir=right]:hover::after, [aria-label][class*=cooltipz][data-cooltipz-dir=right]:focus::after, [aria-label][class*=cooltipz][data-cooltipz-dir=right][data-cooltipz-visible]::after, [aria-label][class*=cooltipz][data-cooltipz-dir=right].cooltipz--visible::after, [aria-label][class*=cooltipz].cooltipz--right:hover::after, [aria-label][class*=cooltipz].cooltipz--right:focus::after, [aria-label][class*=cooltipz].cooltipz--right[data-cooltipz-visible]::after, [aria-label][class*=cooltipz].cooltipz--right.cooltipz--visible::after {
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
[aria-label][data-cooltipz-dir][data-cooltipz-size=fit]::after, [aria-label][data-cooltipz-dir].cooltipz--fit::after, [aria-label][class*=cooltipz][data-cooltipz-size=fit]::after, [aria-label][class*=cooltipz].cooltipz--fit::after {
  width: 100%;
}
[aria-label][data-cooltipz-dir][data-cooltipz-size=small]::after, [aria-label][data-cooltipz-dir].cooltipz--small::after, [aria-label][class*=cooltipz][data-cooltipz-size=small]::after, [aria-label][class*=cooltipz].cooltipz--small::after {
  width: var(--cooltipz-small, 6.25rem);
}
[aria-label][data-cooltipz-dir][data-cooltipz-size=medium]::after, [aria-label][data-cooltipz-dir].cooltipz--medium::after, [aria-label][class*=cooltipz][data-cooltipz-size=medium]::after, [aria-label][class*=cooltipz].cooltipz--medium::after {
  width: var(--cooltipz-medium, 12.5rem);
}
[aria-label][data-cooltipz-dir][data-cooltipz-size=large]::after, [aria-label][data-cooltipz-dir].cooltipz--large::after, [aria-label][class*=cooltipz][data-cooltipz-size=large]::after, [aria-label][class*=cooltipz].cooltipz--large::after {
  width: var(--cooltipz-large, 18.75rem);
}
[aria-label][data-cooltipz-dir][data-cooltipz-size=custom]::after, [aria-label][data-cooltipz-dir].cooltipz--custom::after, [aria-label][class*=cooltipz][data-cooltipz-size=custom]::after, [aria-label][class*=cooltipz].cooltipz--custom::after {
  white-space: pre;
  word-wrap: break-word;
}
[aria-label][data-cooltipz-dir][data-cooltipz-static]::after, [aria-label][data-cooltipz-dir][data-cooltipz-static]::before, [aria-label][data-cooltipz-dir].cooltipz--static::after, [aria-label][data-cooltipz-dir].cooltipz--static::before, [aria-label][class*=cooltipz][data-cooltipz-static]::after, [aria-label][class*=cooltipz][data-cooltipz-static]::before, [aria-label][class*=cooltipz].cooltipz--static::after, [aria-label][class*=cooltipz].cooltipz--static::before {
  -webkit-transition: none;
  transition: none;
}

[aria-label=""][data-cooltipz-dir]::before, [aria-label=""][data-cooltipz-dir]::after, [aria-label=""][class*=cooltipz]::before, [aria-label=""][class*=cooltipz]::after {
  display: none;
}