Subversion Repositories wimsdev

Rev

Rev 12420 | Rev 12553 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed

  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;
  14.     background-color: #F0EEFB;
  15.     color: black;
  16.     font-weight: normal;
  17.     border:1px solid grey;
  18.     box-shadow: 1px 1px 3px;
  19.     padding: .5em;
  20.     z-index: 1;
  21.     /*animation*/
  22.     opacity: 0;
  23.     transition: opacity 1s;
  24.  
  25.     /* Position the tooltip text - see examples below! */
  26.     position: absolute;
  27. }
  28.  
  29. .wims_tooltip>.bottom {
  30.     top: 130%;
  31.     left: 50%;
  32.     margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  33. }
  34.  
  35. /* display an arrow */
  36. .wims_tooltip>.wims_tooltiptext:after{
  37.     content: " ";
  38.     position: absolute;
  39.     margin-left: -5px;
  40.     border-width: 5px;
  41.     border-style: solid;
  42.     border-color: transparent;
  43. }
  44.  
  45. /* top arrow */
  46. .wims_tooltip>.bottom:after{
  47.     bottom: 100%;  /* At the top of the tooltip */
  48.     left: 50%;
  49.     border-bottom-color: #FFF;
  50. }
  51.  
  52. /* choose tooltip position (bottom by default) */
  53. .wims_tooltip>.right {
  54.     top: -.5em;
  55.     left: 110%;
  56. }
  57. /* left arrow */
  58. .wims_tooltip>.right:after{
  59.     top: 50%;
  60.     right: 100%; /* To the left of the tooltip */
  61.     border-right-color: #FFF;
  62. }
  63.  
  64. .wims_tooltip>.left {
  65.     top: -.5em;
  66.     right: 105%;
  67. }
  68. /* right arrow */
  69. .wims_tooltip>.left:after{
  70.     top: 50%;
  71.     left: 100%; /* To the right of the tooltip */
  72.     border-left-color: #FFF;
  73. }
  74.  
  75. .wims_tooltip>.top {
  76.     bottom: 100%;
  77.     left: 50%;
  78.     margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  79. }
  80. /* bottom arrow */
  81. .wims_tooltip>.top:after{
  82.     top: 100%; /* At the bottom of the tooltip */
  83.     left: 50%;
  84.     border-top-color: #FFF;
  85. }
  86.  
  87. /* Show the tooltip text when you mouse over the tooltip container */
  88. .wims_tooltip:hover>.wims_tooltiptext {
  89.     visibility: visible;
  90.     opacity: 1;
  91. }
  92.