| /* fix for double underline on firefox */ |
| abbr[title], abbr[data-original-title]{ |
| border-bottom: none; |
| } |
| |
| #tooltip |
| { |
| text-align: center; |
| color: #fff; |
| background: #000; |
| background: rgba(0,0,0,0.8); |
| position: absolute; |
| z-index: 100; |
| padding: 15px; |
| border-radius: 5px; |
| box-sizing: border-box; |
| } |
| |
| @media only screen and (max-width: 800px){ |
| #tooltip:before{ |
| content: 'x'; |
| position: absolute; |
| color: #fff; |
| right: 8px; |
| top: 3px; |
| font-size: 12px; |
| } |
| } |
| |
| #tooltip:after /* triangle decoration */ |
| { |
| width: 0; |
| height: 0; |
| border-left: 10px solid transparent; |
| border-right: 10px solid transparent; |
| border-top: 10px solid rgba(0,0,0,0.8); |
| content: ''; |
| position: absolute; |
| left: 50%; |
| bottom: -10px; |
| margin-left: -10px; |
| } |
| |
| #tooltip.top:after |
| { |
| border-top-color: transparent; |
| border-bottom: 10px solid #111; |
| top: -20px; |
| bottom: auto; |
| } |
| |
| |
| #tooltip.left:after |
| { |
| left: 10px; |
| margin: 0; |
| } |
| |
| #tooltip.right:after |
| { |
| right: 10px; |
| left: auto; |
| margin: 0; |
| } |