1// CSS Tooltips
2
3@mixin tooltip($tt-min-width, $tt-bgcolor, $tt-position, $tt-align) {
4  position: relative;
5
6  &:after {
7    display: block;
8    background: $tt-bgcolor;
9    border: 1px solid $tt-bgcolor;
10    border-bottom: 0;
11    @include border-radius(3px);
12    padding:  em(8) em(12);
13    width: auto;
14    min-width: $tt-min-width;
15    max-width: 500px;
16    position: absolute;
17    @if $tt-position == "bottom" {
18      @if $tt-align == "right" { right: 0 } @else { left: 0; }
19      top: 101%;
20      margin-top: 8px;
21    } @else if $tt-position == "top" {
22      @if $tt-align == "right" { right: 0 } @else { left: 0; }
23      bottom: 101%;
24      margin-bottom: 8px;
25    } @else if $tt-position == "left" {
26      right: 101%;
27      top: -35%;
28      margin-right: 8px;
29    } @else if $tt-position == "right" {
30      left: 101%;
31      top: -35%;
32      margin-left: 8px;
33    }
34
35    @if $tt-align == "right" {
36      text-align: right;
37    } @else if $tt-align == "left" {
38      text-align: left;
39    }
40
41    color: #fff;
42    content: attr(data-tooltip);
43    line-height: 1.5;
44    font-size: $norm;
45    font-weight: normal;
46    font-style: normal;
47
48    @include transition(opacity 0.1s ease);
49    @include opacity(0);
50    pointer-events: none;
51
52    @if $tt-pretty != "no" {
53      @include background-image(linear-gradient($tt-position, lighten($tt-bgcolor, 12.5%), $tt-bgcolor));
54      @include box-shadow(0 0 5px 0 rgba($tt-bgcolor,.25));
55    }
56  }
57
58  &:before {
59    content: " ";
60    width: 0;
61    height: 0;
62    position: absolute;
63    @if $tt-position == "bottom" {
64      top: 101%;
65      @if $tt-align == "right" { right: 8px } @else { left: 8px; }
66      border-bottom: 9px solid $tt-bgcolor !important;
67      border-left: 9px solid transparent;
68      border-right: 9px solid transparent;
69    } @else if $tt-position == "top" {
70      bottom: 101%;
71      @if $tt-align == "right" { right: 8px } @else { left: 8px; }
72      border-top: 9px solid $tt-bgcolor !important;
73      border-left: 9px solid transparent;
74      border-right: 9px solid transparent;
75    } @else if $tt-position == "left" {
76      top: 3px;
77      right: 101%;
78      border-left: 9px solid $tt-bgcolor !important;
79      border-top: 9px solid transparent;
80      border-bottom: 9px solid transparent;
81    } @else if $tt-position == "right" {
82      top: 3px;
83      left: 101%;
84      border-right: 9px solid $tt-bgcolor !important;
85      border-top: 9px solid transparent;
86      border-bottom: 9px solid transparent;
87    }
88    @include transition(opacity 0.1s ease);
89    @include opacity(0);
90    pointer-events: none;
91  }
92
93  &:hover:after,
94  &:hover:before {
95    @include transition(opacity 0.1s ease);
96    @include opacity(1);
97  }
98}
99