Difference between revisions of "Template:SDU-Denmark"

 
Line 150: Line 150:
  
  
 +
/* Tooltip container */
 
.tooltip {
 
.tooltip {
−
    height:12px;
 
−
    width:14px;
 
−
    background-image:url("https://unsplash.it/1920/1080") no-repeat top center;
 
−
    background-size:cover;
 
 
     position: relative;
 
     position: relative;
 
     display: inline-block;
 
     display: inline-block;
−
     border-bottom: 0px;
+
     border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
−
    z-index: 2;
+
 
}
 
}
  
−
.tooltiptext{
+
/* Tooltip text */
 +
.tooltip .tooltiptext {
 
     visibility: hidden;
 
     visibility: hidden;
−
    font-size:12px;
+
     width: 120px;
−
     width: 200px;
+
     background-color: black;
−
     background-color: rgba(217,226,242,1);
+
 
     color: #fff;
 
     color: #fff;
 
     text-align: center;
 
     text-align: center;
−
     border-width: 1px;
+
     padding: 5px 0;
−
    border-style: solid;
+
−
    border-color: rgba(176,192,221,1);
+
 
     border-radius: 6px;
 
     border-radius: 6px;
−
     padding: 3px 0;
+
 +
     /* Position the tooltip text - see examples below! */
 
     position: absolute;
 
     position: absolute;
 
     z-index: 1;
 
     z-index: 1;
−
    bottom: 100%;
 
−
    left: 50%;
 
−
    margin-left: -100px;
 
−
 
−
   
 
−
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
 
−
    opacity: 0;
 
−
      -webkit-transition: opacity 1s;
 
−
  -moz-transition: opacity 1s;
 
−
    -ms-transition: opacity 1s;
 
−
    -o-transition: opacity 1s;
 
−
        transition: opacity 1s;
 
 
}
 
}
  
 +
/* Show the tooltip text when you mouse over the tooltip container */
 
.tooltip:hover .tooltiptext {
 
.tooltip:hover .tooltiptext {
 
     visibility: visible;
 
     visibility: visible;
−
    opacity: 1;
 
−
}
 
−
/*bottom arrow*/
 
−
.tooltiptext::after {
 
−
    content: " ";
 
−
    position: absolute;
 
−
    top: 100%; /* At the bottom of the tooltip */
 
−
    left: 50%;
 
−
    margin-left: -5px;
 
−
    border-width: 5px;
 
−
    border-style: solid;
 
−
    border-color: rgba(176,192,221,1) transparent transparent transparent;
 
 
}
 
}
  

Latest revision as of 09:21, 16 August 2017