Rev 13888 | Details | Compare with Previous | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 12420 | obado | 1 | |
| 2 | /* Tooltip container */ |
||
| 3 | .wims_tooltip { |
||
| 4 | position: relative; |
||
| 5 | display: inline-block; |
||
| 6 | border-bottom: 1px dotted; /* If you want dots under the hoverable text */ |
||
| 7 | } |
||
| 8 | |||
| 9 | /* Tooltip text */ |
||
| 10 | .wims_tooltip>.wims_tooltiptext { |
||
| 11 | visibility: hidden; |
||
| 12 | width: 120px; |
||
| 13 | box-sizing: border-box; |
||
| 12549 | bpr | 14 | background-color: #F0EEFB; |
| 12420 | obado | 15 | color: black; |
| 16 | font-weight: normal; |
||
| 17 | border:1px solid grey; |
||
| 18 | box-shadow: 1px 1px 3px; |
||
| 12553 | bpr | 19 | text-align:left; |
| 12420 | obado | 20 | padding: .5em; |
| 14725 | obado | 21 | z-index: 1000; |
| 22 | text-shadow: none; |
||
| 12420 | obado | 23 | /*animation*/ |
| 24 | opacity: 0; |
||
| 25 | transition: opacity 1s; |
||
| 26 | |||
| 27 | /* Position the tooltip text - see examples below! */ |
||
| 28 | position: absolute; |
||
| 29 | } |
||
| 30 | |||
| 31 | .wims_tooltip>.bottom { |
||
| 32 | top: 130%; |
||
| 33 | left: 50%; |
||
| 34 | margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ |
||
| 35 | } |
||
| 36 | |||
| 37 | /* display an arrow */ |
||
| 38 | .wims_tooltip>.wims_tooltiptext:after{ |
||
| 39 | content: " "; |
||
| 40 | position: absolute; |
||
| 41 | margin-left: -5px; |
||
| 42 | border-width: 5px; |
||
| 43 | border-style: solid; |
||
| 44 | border-color: transparent; |
||
| 45 | } |
||
| 46 | |||
| 47 | /* top arrow */ |
||
| 48 | .wims_tooltip>.bottom:after{ |
||
| 49 | bottom: 100%; /* At the top of the tooltip */ |
||
| 50 | left: 50%; |
||
| 12875 | obado | 51 | border-bottom-color: #000; |
| 12420 | obado | 52 | } |
| 53 | |||
| 54 | /* choose tooltip position (bottom by default) */ |
||
| 55 | .wims_tooltip>.right { |
||
| 56 | top: -.5em; |
||
| 57 | left: 110%; |
||
| 58 | } |
||
| 59 | /* left arrow */ |
||
| 60 | .wims_tooltip>.right:after{ |
||
| 61 | top: 50%; |
||
| 62 | right: 100%; /* To the left of the tooltip */ |
||
| 12875 | obado | 63 | border-right-color: #000; |
| 12420 | obado | 64 | } |
| 65 | |||
| 66 | .wims_tooltip>.left { |
||
| 67 | top: -.5em; |
||
| 68 | right: 105%; |
||
| 69 | } |
||
| 70 | /* right arrow */ |
||
| 71 | .wims_tooltip>.left:after{ |
||
| 12875 | obado | 72 | top: .5em; |
| 12420 | obado | 73 | left: 100%; /* To the right of the tooltip */ |
| 12875 | obado | 74 | border-left-color: #000; |
| 12420 | obado | 75 | } |
| 76 | |||
| 77 | .wims_tooltip>.top { |
||
| 78 | bottom: 100%; |
||
| 79 | left: 50%; |
||
| 80 | margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ |
||
| 81 | } |
||
| 82 | /* bottom arrow */ |
||
| 83 | .wims_tooltip>.top:after{ |
||
| 84 | top: 100%; /* At the bottom of the tooltip */ |
||
| 85 | left: 50%; |
||
| 12875 | obado | 86 | border-top-color: #000; |
| 12420 | obado | 87 | } |
| 13886 | lemaire | 88 | .wims_tooltip>.bottom_left { |
| 13888 | obado | 89 | top: 130%; |
| 90 | right: 0; |
||
| 13886 | lemaire | 91 | } |
| 13888 | obado | 92 | /* top arrow */ |
| 13886 | lemaire | 93 | .wims_tooltip>.bottom_left:after{ |
| 13888 | obado | 94 | bottom: 100%; /* At the top of the tooltip */ |
| 13886 | lemaire | 95 | right: 5px; |
| 13888 | obado | 96 | border-bottom-color: #000; |
| 13886 | lemaire | 97 | } |
| 12420 | obado | 98 | |
| 99 | /* Show the tooltip text when you mouse over the tooltip container */ |
||
| 100 | .wims_tooltip:hover>.wims_tooltiptext { |
||
| 101 | visibility: visible; |
||
| 102 | opacity: 1; |
||
| 103 | } |