Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .container {
- width: 300px;
- margin: 0 auto;
- overflow: auto;
- }
- .fruits-list {
- list-style: none;
- margin: 0;
- padding: 0;
- text-align: center;
- li {
- position: relative;
- padding: 20px 0;
- border-bottom: 1px solid #eee;
- }
- }
- /* hide tooltip by default */
- [tooltip-item]::before,
- [tooltip-item]::after {
- visibility: hidden;
- opacity: 0;
- pointer-events: none;
- }
- /* general tooltip styles */
- [tooltip-item]::before {
- content: attr(tooltip-item); /* get attribute value */
- position: absolute;
- top: 0;
- left: 0;
- margin-bottom: 5px;
- margin-left: -80px;
- padding: 7px;
- width: 160px;
- border-radius: 3px;
- background-color: #fff;
- box-shadow: -1px 2px 10px -3px rgba(41, 41, 41, 0.59);
- color: #000;
- text-align: center;
- font-size: 12px;
- line-height: 1.2;
- }
- /* show tooltip on hover */
- [tooltip-item]:hover::before,
- [tooltip-item]:hover::after {
- visibility: visible;
- opacity: 1;
- z-index: 99;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement