Difference between revisions of "Template:Copenhagen-Header"

Line 718: Line 718:
 
}
 
}
  
−
.tooltip {
+
/**
−
    position: relative;
+
* Tooltip Styles
−
    display: inline-block;
+
*/
−
    border-bottom: 1px dotted black;
+
 
 +
/* Add this attribute to the element that needs a tooltip */
 +
[data-tooltip] {
 +
  position: relative;
 +
  z-index: 2;
 +
  cursor: pointer;
 
}
 
}
  
−
.tooltip .tooltiptext {
+
/* Hide the tooltip content by default */
−
    visibility: hidden;
+
[data-tooltip]:before,
−
    width: 120px;
+
[data-tooltip]:after {
−
    background-color: black;
+
  visibility: hidden;
−
    color: #fff;
+
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
−
    text-align: center;
+
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
−
    border-radius: 6px;
+
  opacity: 0;
−
    padding: 5px 0;
+
  pointer-events: none;
 +
}
  
−
    /* Position the tooltip */
+
/* Position tooltip above the element */
−
    position: absolute;
+
[data-tooltip]:before {
−
    z-index: 1;
+
  position: absolute;
 +
  bottom: 150%;
 +
  left: 50%;
 +
  margin-bottom: 5px;
 +
  margin-left: -80px;
 +
  padding: 7px;
 +
  width: 160px;
 +
  -webkit-border-radius: 3px;
 +
  -moz-border-radius: 3px;
 +
  border-radius: 3px;
 +
  background-color: #000;
 +
  background-color: hsla(0, 0%, 20%, 0.9);
 +
  color: #fff;
 +
  content: attr(data-tooltip);
 +
  text-align: center;
 +
  font-size: 14px;
 +
  line-height: 1.2;
 
}
 
}
  
−
.tooltip:hover .tooltiptext {
+
/* Triangle hack to make tooltip look like a speech bubble */
−
    visibility: visible;
+
[data-tooltip]:after {
 +
  position: absolute;
 +
  bottom: 150%;
 +
  left: 50%;
 +
  margin-left: -5px;
 +
  width: 0;
 +
  border-top: 5px solid #000;
 +
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
 +
  border-right: 5px solid transparent;
 +
  border-left: 5px solid transparent;
 +
  content: " ";
 +
  font-size: 0;
 +
  line-height: 0;
 
}
 
}
  
 +
/* Show tooltip content on hover */
 +
[data-tooltip]:hover:before,
 +
[data-tooltip]:hover:after {
 +
  visibility: visible;
 +
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 +
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
 +
  opacity: 1;
 +
}
 
     </style>
 
     </style>
  

Revision as of 23:02, 29 October 2017