You are here

tooltip.css in Tooltip Taxonomy 8

.tx-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dashed #0070c9;
  cursor: help;
}

.tx-tooltip .tx-tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: #fff;
  color: #222;
  text-align: left;
  border-radius: 6px;
  border: 2px solid #0070c9;
  padding: 0.5rem 0.3rem;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tx-tooltip .tx-tooltip-text::after {
  content: "";
  position: absolute;
  top: 0.8rem;
  right: 100%;
  margin-top: -5px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent #0070c9 transparent transparent;
}
.tx-tooltip:hover .tx-tooltip-text,
.tx-tooltip:focus .tx-tooltip-text {
  visibility: visible;
}

.tx-tooltip .tx-tooltip {
    border: none;
}

.tx-tooltip:hover .tx-tooltip-text .tx-tooltip .tx-tooltip-text,
.tx-tooltip:focus .tx-tooltip-text .tx-tooltip .tx-tooltip-text {
  visibility: hidden;
}

File

css/tooltip.css
View source
  1. .tx-tooltip {
  2. position: relative;
  3. display: inline-block;
  4. border-bottom: 2px dashed #0070c9;
  5. cursor: help;
  6. }
  7. .tx-tooltip .tx-tooltip-text {
  8. visibility: hidden;
  9. width: 120px;
  10. background-color: #fff;
  11. color: #222;
  12. text-align: left;
  13. border-radius: 6px;
  14. border: 2px solid #0070c9;
  15. padding: 0.5rem 0.3rem;
  16. position: absolute;
  17. z-index: 1;
  18. top: -5px;
  19. left: 110%;
  20. }
  21. .tx-tooltip .tx-tooltip-text::after {
  22. content: "";
  23. position: absolute;
  24. top: 0.8rem;
  25. right: 100%;
  26. margin-top: -5px;
  27. border-width: 8px;
  28. border-style: solid;
  29. border-color: transparent #0070c9 transparent transparent;
  30. }
  31. .tx-tooltip:hover .tx-tooltip-text,
  32. .tx-tooltip:focus .tx-tooltip-text {
  33. visibility: visible;
  34. }
  35. .tx-tooltip .tx-tooltip {
  36. border: none;
  37. }
  38. .tx-tooltip:hover .tx-tooltip-text .tx-tooltip .tx-tooltip-text,
  39. .tx-tooltip:focus .tx-tooltip-text .tx-tooltip .tx-tooltip-text {
  40. visibility: hidden;
  41. }