Skip to content

Commit 27e4907

Browse files
johndjamesonjohndjameson
committed
Add Bootstrap tooltips
1 parent b49b5e0 commit 27e4907

6 files changed

Lines changed: 128 additions & 3 deletions

File tree

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"lodash": "~3.5.0",
2525
"angular-resource": "1.4.0-beta.6",
2626
"marked": "~0.3.3",
27-
"angular-animate": "1.4.0-beta.6"
27+
"angular-animate": "1.4.0-beta.6",
28+
"bootstrap": "~3.3.4"
2829
}
2930
}

‎client/javascripts/application.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,23 @@ jQuery(function($) {
5454
}
5555
});
5656

57+
// ----- Vendor ----- //
58+
59+
// Bootstrap
60+
61+
$('[data-tooltip]').tooltip({
62+
animation : false,
63+
container : 'body',
64+
placement : 'bottom',
65+
title : function() {
66+
return $(this).data('tooltip');
67+
},
68+
viewport : {
69+
selector : 'body',
70+
padding : 10
71+
}
72+
});
73+
5774
});
5875

5976
// -------------------------------------

‎client/stylesheets/application.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
6363
@import 'vendor/codemirror'
6464
@import 'vendor/codemirror-theme'
65+
@import 'vendor/tooltip'
6566

6667
// -------------------------------------
6768
// Foundation - Tools

‎client/stylesheets/foundation/_helpers.sass‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,21 @@
2929
@function font-size($target, $context: $b-fontSize)
3030
@return percentage($target / $context)
3131

32+
// ----- Opposite Position ----- //
33+
// -> Returns the opposite side
34+
//
35+
// $side - the side to return the opposite of
36+
37+
@function opposite-position($side)
38+
@if $side == 'top'
39+
@return 'bottom'
40+
@if $side == 'bottom'
41+
@return 'top'
42+
@if $side == 'left'
43+
@return 'right'
44+
@if $side == 'right'
45+
@return 'left'
46+
3247
// ----- Shade ----- //
3348
// -> Slightly darken a color
3449
// via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified)

‎client/stylesheets/vendor/_tooltip.sass‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// *************************************
2+
//
3+
// Tooltip
4+
// -> Extra information on hover
5+
//
6+
// *************************************
7+
8+
$tooltip-background: $slate
9+
$tooltip-color: $c-text-invert
10+
11+
$tooltip-caretSize: 6px
12+
$tooltip-lineHeight: 1.5
13+
$tooltip-maxWidth: 200px
14+
$tooltip-opacity: 1
15+
$tooltip-positions: 'bottom', 'top'
16+
17+
.tooltip
18+
display: block
19+
font-size: 14px
20+
line-height: $tooltip-lineHeight
21+
opacity: 0
22+
position: absolute
23+
visibility: visible
24+
z-index: 100
25+
26+
// -------------------------------------
27+
// Modifiers
28+
// -------------------------------------
29+
30+
// ----- Positions ----- //
31+
32+
@each $position in $tooltip-positions
33+
34+
.tooltip.#{$position}
35+
padding-#{$position}: $tooltip-caretSize
36+
padding-#{opposite-position($position)}: $tooltip-caretSize
37+
@if $position == 'top' or $position == 'left'
38+
margin-#{$position}: -$tooltip-caretSize
39+
@else
40+
margin-#{opposite-position($position)}: $tooltip-caretSize
41+
42+
.tooltip-arrow
43+
border-#{$position}-color: $tooltip-background
44+
@if $position == 'top' or $position == 'bottom'
45+
#{opposite-position($position)}: 0
46+
left: 50%
47+
margin-left: -$tooltip-caretSize
48+
@if $position == 'left' or $position == 'right'
49+
#{opposite-position($position)}: 0
50+
top: 50%
51+
margin-top: -$tooltip-caretSize
52+
@if $position == 'top'
53+
border-width: $tooltip-caretSize $tooltip-caretSize 0
54+
@if $position == 'left'
55+
border-width: $tooltip-caretSize 0 $tooltip-caretSize $tooltip-caretSize
56+
@if $position == 'right'
57+
border-width: $tooltip-caretSize $tooltip-caretSize $tooltip-caretSize 0
58+
@if $position == 'bottom'
59+
border-width: 0 $tooltip-caretSize $tooltip-caretSize
60+
61+
// -------------------------------------
62+
// States
63+
// -------------------------------------
64+
65+
// ----- In ----- //
66+
67+
.tooltip.in
68+
opacity: $tooltip-opacity
69+
70+
// -------------------------------------
71+
// Scaffolding
72+
// -------------------------------------
73+
74+
// ----- Arrow ----- //
75+
76+
.tooltip-arrow
77+
border-color: transparent
78+
border-style: solid
79+
height: 0
80+
position: absolute
81+
width: 0
82+
83+
// ----- Inner ----- //
84+
85+
.tooltip-inner
86+
background: $tooltip-background
87+
border-radius: 4px
88+
color: $tooltip-color
89+
max-width: $tooltip-maxWidth
90+
padding: $b-space-xs $b-space $b-space-s
91+
text-align: center

‎gulpfile.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ var options = {
4949

5050
js: {
5151
files: [
52-
'client/javascripts/application.js',
52+
'client/javascripts/application.js',
5353
'client/javascripts/**/*.js'
5454
],
55-
vendorFiles: ['bower_components/jquery/dist/jquery.js'],
55+
vendorFiles: ['bower_components/jquery/dist/jquery.js', 'bower_components/bootstrap/js/tooltip.js'],
5656
vendorCourseFiles: [
5757
'bower_components/angular/angular.js',
5858
'bower_components/angular-resource/angular-resource.js',

0 commit comments

Comments
 (0)