Skip to content

Commit

Permalink
tooltip css
Browse files Browse the repository at this point in the history
  • Loading branch information
moueza committed Dec 1, 2021
1 parent 6ecd40e commit fe5ad9b
Showing 1 changed file with 47 additions and 0 deletions.
47 changes: 47 additions & 0 deletions basicSCSS.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/* index des ressources tooltip
Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;

/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

1 comment on commit fe5ad9b

@moueza
Copy link
Owner Author

@moueza moueza commented on fe5ad9b Dec 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See #9 Clickable tooltip

Please sign in to comment.