|
|
| Line 718: |
Line 718: |
| | } | | } |
| | | | |
| − | /**
| + | a[title]:click:after { |
| − | * Tooltip Styles
| + | content: attr(title); |
| − | */
| + | |
| − | | + | |
| − | /* Add this attribute to the element that needs a tooltip */
| + | |
| − | [data-tooltip] { | + | |
| − | position: relative;
| + | |
| − | z-index: 2;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Hide the tooltip content by default */
| + | |
| − | [data-tooltip]:before,
| + | |
| − | [data-tooltip]:after {
| + | |
| − | visibility: hidden; | + | |
| − | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
| + | |
| − | filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
| + | |
| − | opacity: 0;
| + | |
| − | pointer-events: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Position tooltip above the element */
| + | |
| − | [data-tooltip]:before {
| + | |
| | position: absolute; | | 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;
| |
| − | }
| |
| − |
| |
| − | /* Triangle hack to make tooltip look like a speech bubble */
| |
| − | [data-tooltip]:after {
| |
| − | position: absolute;
| |
| − | bottom: 150%;
| |
| − | left: 170%;
| |
| − | 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]:click:before,
| |
| − | [data-tooltip]:click:after {
| |
| − | visibility: visible;
| |
| − | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
| |
| − | filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
| |
| − | opacity: 1;
| |
| | } | | } |
| | </style> | | </style> |
