Subversion Repositories wimsdev

Rev

Rev 13886 | 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.     text-align:left;
  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%;
  50.     border-bottom-color: #000;
  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 */
  62.     border-right-color: #000;
  63. }
  64.  
  65. .wims_tooltip>.left {
  66.     top: -.5em;
  67.     right: 105%;
  68. }
  69. /* right arrow */
  70. .wims_tooltip>.left:after{
  71.     top: .5em;
  72.     left: 100%; /* To the right of the tooltip */
  73.     border-left-color: #000;
  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%;
  85.     border-top-color: #000;
  86. }
  87. .wims_tooltip>.bottom_left {
  88.     top: 130%;
  89.     right: 0;
  90. }
  91. /* top arrow */
  92. .wims_tooltip>.bottom_left:after{
  93.     bottom: 100%; /* At the top of the tooltip */
  94.     right: 5px;
  95.     border-bottom-color: #000;
  96. }
  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. }
  103.