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.cssView source
- .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;
- }