Subversion Repositories wimsdev

Rev

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