Rev 13886 | Go to most recent revision | 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; |
| 21 | z-index: 1; |
||
| 22 | /*animation*/ |
||
| 23 | opacity: 0; |
||
| 24 | transition: opacity 1s; |
||
| 25 | |||
| 26 | /* Position the tooltip text - see examples below! */ |
||
| 27 | position: absolute; |
||
| 28 | } |
||
| 29 | |||
| 30 | .wims_tooltip>.bottom { |
||
| 31 | top: 130%; |
||
| 32 | left: 50%; |
||
| 33 | margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ |
||
| 34 | } |
||
| 35 | |||
| 36 | /* display an arrow */ |
||
| 37 | .wims_tooltip>.wims_tooltiptext:after{ |
||
| 38 | content: " "; |
||
| 39 | position: absolute; |
||
| 40 | margin-left: -5px; |
||
| 41 | border-width: 5px; |
||
| 42 | border-style: solid; |
||
| 43 | border-color: transparent; |
||
| 44 | } |
||
| 45 | |||
| 46 | /* top arrow */ |
||
| 47 | .wims_tooltip>.bottom:after{ |
||
| 48 | bottom: 100%; /* At the top of the tooltip */ |
||
| 49 | left: 50%; |
||
| 12875 | obado | 50 | border-bottom-color: #000; |
| 12420 | obado | 51 | } |
| 52 | |||
| 53 | /* choose tooltip position (bottom by default) */ |
||
| 54 | .wims_tooltip>.right { |
||
| 55 | top: -.5em; |
||
| 56 | left: 110%; |
||
| 57 | } |
||
| 58 | /* left arrow */ |
||
| 59 | .wims_tooltip>.right:after{ |
||
| 60 | top: 50%; |
||
| 61 | right: 100%; /* To the left of the tooltip */ |
||
| 12875 | obado | 62 | border-right-color: #000; |
| 12420 | obado | 63 | } |
| 64 | |||
| 65 | .wims_tooltip>.left { |
||
| 66 | top: -.5em; |
||
| 67 | right: 105%; |
||
| 68 | } |
||
| 69 | /* right arrow */ |
||
| 70 | .wims_tooltip>.left:after{ |
||
| 12875 | obado | 71 | top: .5em; |
| 12420 | obado | 72 | left: 100%; /* To the right of the tooltip */ |
| 12875 | obado | 73 | border-left-color: #000; |
| 12420 | obado | 74 | } |
| 75 | |||
| 76 | .wims_tooltip>.top { |
||
| 77 | bottom: 100%; |
||
| 78 | left: 50%; |
||
| 79 | margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ |
||
| 80 | } |
||
| 81 | /* bottom arrow */ |
||
| 82 | .wims_tooltip>.top:after{ |
||
| 83 | top: 100%; /* At the bottom of the tooltip */ |
||
| 84 | left: 50%; |
||
| 12875 | obado | 85 | border-top-color: #000; |
| 12420 | obado | 86 | } |
| 13886 | lemaire | 87 | .wims_tooltip>.bottom_left { |
| 13888 | obado | 88 | top: 130%; |
| 89 | right: 0; |
||
| 13886 | lemaire | 90 | } |
| 13888 | obado | 91 | /* top arrow */ |
| 13886 | lemaire | 92 | .wims_tooltip>.bottom_left:after{ |
| 13888 | obado | 93 | bottom: 100%; /* At the top of the tooltip */ |
| 13886 | lemaire | 94 | right: 5px; |
| 13888 | obado | 95 | border-bottom-color: #000; |
| 13886 | lemaire | 96 | } |
| 12420 | obado | 97 | |
| 98 | /* Show the tooltip text when you mouse over the tooltip container */ |
||
| 99 | .wims_tooltip:hover>.wims_tooltiptext { |
||
| 100 | visibility: visible; |
||
| 101 | opacity: 1; |
||
| 102 | } |