Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

hint.css/hint.base.css

Go to file
 
 
Cannot retrieve contributors at this time
335 lines (280 sloc) 8.76 KB
Raw Blame
Open in GitHub Desktop
/*! Hint.css (base version) - v2.0.0 - 2016-01-25
* http://kushagragour.in/lab/hint/
* Copyright (c) 2016 Kushagra Gour; Licensed */
/*-------------------------------------* HINT.css - A CSS tooltip library
\*-------------------------------------*/
/**
* HINT.css is a tooltip library made in pure CSS.
*
* Source: https://github.com/chinchang/hint.css
* Demo: http://kushagragour.in/lab/hint/
*
* Release under The MIT License
*
*/
/**
* source: hint-core.scss
*
* Defines the basic styling for the tooltip.
* Each tooltip is made of 2 parts:
* 1) body (:after)
* 2) arrow (:before)
*
* Classes added:
* 1) hint
*/
[data-hint] {
position: relative;
display: inline-block;
/**
* tooltip arrow
*/
/**
* tooltip body
*/ }
[data-hint]:before, [data-hint]:after {
position: absolute;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: hidden;
opacity: 0;
z-index: 1000000;
pointer-events: none;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
transition-delay: 0ms; }
[data-hint]:hover:before, [data-hint]:hover:after {
visibility: visible;
opacity: 1; }
[data-hint]:hover:before, [data-hint]:hover:after {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms; }
[data-hint]:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1000001; }
[data-hint]:after {
content: attr(data-hint);
background: #383838;
color: white;
padding: 8px 10px;
font-size: 12px;
line-height: 12px;
white-space: nowrap; }
[data-hint='']:before, [data-hint='']:after {
display: none !important; }
/**
* source: hint-position.scss
*
* Defines the positoning logic for the tooltips.
*
* Classes added:
* 1) hint--top
* 2) hint--bottom
* 3) hint--left
* 4) hint--right
*/
/**
* set default color for tooltip arrows
*/
.hint--top-left:before {
border-top-color: #383838; }
.hint--top-right:before {
border-top-color: #383838; }
.hint--top:before {
border-top-color: #383838; }
.hint--bottom-left:before {
border-bottom-color: #383838; }
.hint--bottom-right:before {
border-bottom-color: #383838; }
.hint--bottom:before {
border-bottom-color: #383838; }
.hint--left:before {
border-left-color: #383838; }
.hint--right:before {
border-right-color: #383838; }
/**
* top tooltip
*/
.hint--top:before {
margin-bottom: -12px; }
.hint--top:before, .hint--top:after {
bottom: 100%;
left: 50%; }
.hint--top:after, .hint--top:before {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%); }
.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
-webkit-transform: translateX(-50%) translateY(-8px);
-moz-transform: translateX(-50%) translateY(-8px);
transform: translateX(-50%) translateY(-8px); }
/**
* bottom tooltip
*/
.hint--bottom:before {
margin-top: -12px; }
.hint--bottom:before, .hint--bottom:after {
top: 100%;
left: 50%; }
.hint--bottom:after, .hint--bottom:before {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%); }
.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
-webkit-transform: translateX(-50%) translateY(8px);
-moz-transform: translateX(-50%) translateY(8px);
transform: translateX(-50%) translateY(8px); }
/**
* right tooltip
*/
.hint--right:before {
margin-left: -12px;
margin-bottom: -6px; }
.hint--right:after {
margin-bottom: -14px; }
.hint--right:before, .hint--right:after {
left: 100%;
bottom: 50%; }
.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
transform: translateX(8px); }
/**
* left tooltip
*/
.hint--left:before {
margin-right: -12px;
margin-bottom: -6px; }
.hint--left:after {
margin-bottom: -14px; }
.hint--left:before, .hint--left:after {
right: 100%;
bottom: 50%; }
.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {
-webkit-transform: translateX(-8px);
-moz-transform: translateX(-8px);
transform: translateX(-8px); }
/**
* top-left tooltip
*/
.hint--top-left:before {
margin-bottom: -12px; }
.hint--top-left:before, .hint--top-left:after {
bottom: 100%;
left: 50%; }
.hint--top-left:after, .hint--top-left:before {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%); }
.hint--top-left:after {
margin-left: 6px; }
.hint--top-left:hover:after, .hint--top-left:hover:before, .hint--top-left:focus:after, .hint--top-left:focus:before {
-webkit-transform: translateX(-100%) translateY(-8px);
-moz-transform: translateX(-100%) translateY(-8px);
transform: translateX(-100%) translateY(-8px); }
/**
* top-right tooltip
*/
.hint--top-right:before {
margin-bottom: -12px; }
.hint--top-right:before, .hint--top-right:after {
bottom: 100%;
left: 50%; }
.hint--top-right:after, .hint--top-right:before {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0); }
.hint--top-right:after {
margin-left: -6px; }
.hint--top-right:hover:after, .hint--top-right:hover:before, .hint--top-right:focus:after, .hint--top-right:focus:before {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
transform: translateY(-8px); }
/**
* bottom-left tooltip
*/
.hint--bottom-left:before {
margin-top: -12px; }
.hint--bottom-left:before, .hint--bottom-left:after {
top: 100%;
left: 50%; }
.hint--bottom-left:after, .hint--bottom-left:before {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%); }
.hint--bottom-left:after {
margin-left: 6px; }
.hint--bottom-left:hover:after, .hint--bottom-left:hover:before, .hint--bottom-left:focus:after, .hint--bottom-left:focus:before {
-webkit-transform: translateX(-100%) translateY(8px);
-moz-transform: translateX(-100%) translateY(8px);
transform: translateX(-100%) translateY(8px); }
/**
* bottom-right tooltip
*/
.hint--bottom-right:before {
margin-top: -12px; }
.hint--bottom-right:before, .hint--bottom-right:after {
top: 100%;
left: 50%; }
.hint--bottom-right:after, .hint--bottom-right:before {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0); }
.hint--bottom-right:after {
margin-left: -6px; }
.hint--bottom-right:hover:after, .hint--bottom-right:hover:before, .hint--bottom-right:focus:after, .hint--bottom-right:focus:before {
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px); }
/**
* source: hint-always.scss
*
* Defines a persisted tooltip which shows always.
*
* Classes added:
* 1) hint--always
*
*/
.hint--always:after, .hint--always:before {
opacity: 1;
visibility: visible; }
.hint--always.hint--top:after, .hint--always.hint--top:before {
-webkit-transform: translateX(-50%) translateY(-8px);
-moz-transform: translateX(-50%) translateY(-8px);
transform: translateX(-50%) translateY(-8px); }
.hint--always.hint--top-left:after, .hint--always.hint--top-left:before {
-webkit-transform: translateX(-100%) translateY(-8px);
-moz-transform: translateX(-100%) translateY(-8px);
transform: translateX(-100%) translateY(-8px); }
.hint--always.hint--top-right:after, .hint--always.hint--top-right:before {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
transform: translateY(-8px); }
.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
-webkit-transform: translateX(-50%) translateY(8px);
-moz-transform: translateX(-50%) translateY(8px);
transform: translateX(-50%) translateY(8px); }
.hint--always.hint--bottom-left:after, .hint--always.hint--bottom-left:before {
-webkit-transform: translateX(-100%) translateY(8px);
-moz-transform: translateX(-100%) translateY(8px);
transform: translateX(-100%) translateY(8px); }
.hint--always.hint--bottom-right:after, .hint--always.hint--bottom-right:before {
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px); }
.hint--always.hint--left:after, .hint--always.hint--left:before {
-webkit-transform: translateX(-8px);
-moz-transform: translateX(-8px);
transform: translateX(-8px); }
.hint--always.hint--right:after, .hint--always.hint--right:before {
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
transform: translateX(8px); }