*[data-tooltip-top],
*[data-tooltip-bottom],
*[data-tooltip-right],
*[data-tooltip-left] {
  text-decoration: none;
}

*[data-tooltip-top]:hover,
*[data-tooltip-bottom]:hover,
*[data-tooltip-right]:hover,
*[data-tooltip-left]:hover {
  position: relative;
}

*[data-tooltip-top]:hover:after,
*[data-tooltip-bottom]:hover:after,
*[data-tooltip-right]:hover:after,
*[data-tooltip-left]:hover:after {
  position: absolute;
  z-index: 20px;
  color: #000;
  font-size: 12px;
  font-weight: normal;
  font-family: 'Roboto Condensed', sans-serif;
  outline: 1px solid #000;
  background: #fff;
  padding: 4px 8px;
}

.\\view\\card *[data-tooltip-top]:hover:after,
.\\view\\card *[data-tooltip-bottom]:hover:after,
.\\view\\card *[data-tooltip-right]:hover:after,
.\\view\\card *[data-tooltip-left]:hover:after {
  min-width: 240px;
  max-width: 340px;
}

.\\view\\card *[data-tooltip-top]:hover:after,
.\\view\\card *[data-tooltip-bottom]:hover:after {
  left: 50%;
  transform: translateX(-50%);
}

.\\view\\stack *[data-tooltip-top]:hover:after,
.\\view\\stack *[data-tooltip-bottom]:hover:after {
  left: 1px;
}

/* Tooltip on Top */
*[data-tooltip-top]:hover:after {
  content: attr(data-tooltip-top);
  bottom: 100%;
}

/* Tooltip on Bottom */
*[data-tooltip-bottom]:hover:after {
  content: attr(data-tooltip-bottom);
  top: 100%;
}

/* Tooltip on Right */
*[data-tooltip-right]:hover:after {
  content: attr(data-tooltip-right);
  left: 100%;
}

/* Tooltip on Left */
*[data-tooltip-left]:hover:after {
  content: attr(data-tooltip-left);
  right: 100%;
}