tiptip-rails 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +2 -0
- data/Gemfile +2 -0
- data/README.md +26 -0
- data/app/assets/javascripts/tipTip.js +191 -0
- data/app/assets/stylesheets/tipTip.css +113 -0
- data/lib/tiptip-rails.rb +2 -0
- data/lib/tiptip/rails.rb +6 -0
- data/lib/tiptip/version.rb +3 -0
- data/tiptip-rails.gemspec +21 -0
- metadata +118 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/README.md
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
# tiptip-rails
|
2
|
+
This gem just includes [TipTip jQuery plug-in](https://github.com/drewwilson/TipTip) as an asset in the Rails 3.1 (or newer) asset pipeline.
|
3
|
+
|
4
|
+
The current version in the gem is TipTip 1.3
|
5
|
+
|
6
|
+
## Installation
|
7
|
+
|
8
|
+
Add the gem to the Gemfile
|
9
|
+
|
10
|
+
gem "tiptip-rails", "~> 1.0.0"
|
11
|
+
|
12
|
+
## Usage
|
13
|
+
|
14
|
+
In your JavaScript manifest (e.g. `application.js`)
|
15
|
+
|
16
|
+
//= require tipTip
|
17
|
+
|
18
|
+
In your Stylesheet manifest (e.g. `application.css`)
|
19
|
+
|
20
|
+
*= require tipTip
|
21
|
+
|
22
|
+
## Licensing
|
23
|
+
|
24
|
+
TipTip, which makes up the majority of this gem, has [its own licensing](https://github.com/drewwilson/TipTip).
|
25
|
+
|
26
|
+
The gem itself is released under the MIT license
|
@@ -0,0 +1,191 @@
|
|
1
|
+
/*
|
2
|
+
* TipTip
|
3
|
+
* Copyright 2010 Drew Wilson
|
4
|
+
* www.drewwilson.com
|
5
|
+
* code.drewwilson.com/entry/tiptip-jquery-plugin
|
6
|
+
*
|
7
|
+
* Version 1.3 - Updated: Mar. 23, 2010
|
8
|
+
*
|
9
|
+
* This Plug-In will create a custom tooltip to replace the default
|
10
|
+
* browser tooltip. It is extremely lightweight and very smart in
|
11
|
+
* that it detects the edges of the browser window and will make sure
|
12
|
+
* the tooltip stays within the current window size. As a result the
|
13
|
+
* tooltip will adjust itself to be displayed above, below, to the left
|
14
|
+
* or to the right depending on what is necessary to stay within the
|
15
|
+
* browser window. It is completely customizable as well via CSS.
|
16
|
+
*
|
17
|
+
* This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
|
18
|
+
* http://www.opensource.org/licenses/mit-license.php
|
19
|
+
* http://www.gnu.org/licenses/gpl.html
|
20
|
+
*/
|
21
|
+
|
22
|
+
(function($){
|
23
|
+
$.fn.tipTip = function(options) {
|
24
|
+
var defaults = {
|
25
|
+
activation: "hover",
|
26
|
+
keepAlive: false,
|
27
|
+
maxWidth: "200px",
|
28
|
+
edgeOffset: 3,
|
29
|
+
defaultPosition: "bottom",
|
30
|
+
delay: 400,
|
31
|
+
fadeIn: 200,
|
32
|
+
fadeOut: 200,
|
33
|
+
attribute: "title",
|
34
|
+
content: false, // HTML or String to fill TipTIp with
|
35
|
+
enter: function(){},
|
36
|
+
exit: function(){}
|
37
|
+
};
|
38
|
+
var opts = $.extend(defaults, options);
|
39
|
+
|
40
|
+
// Setup tip tip elements and render them to the DOM
|
41
|
+
if($("#tiptip_holder").length <= 0){
|
42
|
+
var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>');
|
43
|
+
var tiptip_content = $('<div id="tiptip_content"></div>');
|
44
|
+
var tiptip_arrow = $('<div id="tiptip_arrow"></div>');
|
45
|
+
$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')));
|
46
|
+
} else {
|
47
|
+
var tiptip_holder = $("#tiptip_holder");
|
48
|
+
var tiptip_content = $("#tiptip_content");
|
49
|
+
var tiptip_arrow = $("#tiptip_arrow");
|
50
|
+
}
|
51
|
+
|
52
|
+
return this.each(function(){
|
53
|
+
var org_elem = $(this);
|
54
|
+
if(opts.content){
|
55
|
+
var org_title = opts.content;
|
56
|
+
} else {
|
57
|
+
var org_title = org_elem.attr(opts.attribute);
|
58
|
+
}
|
59
|
+
if(org_title != ""){
|
60
|
+
if(!opts.content){
|
61
|
+
org_elem.removeAttr(opts.attribute); //remove original Attribute
|
62
|
+
}
|
63
|
+
var timeout = false;
|
64
|
+
|
65
|
+
if(opts.activation == "hover"){
|
66
|
+
org_elem.hover(function(){
|
67
|
+
active_tiptip();
|
68
|
+
}, function(){
|
69
|
+
if(!opts.keepAlive){
|
70
|
+
deactive_tiptip();
|
71
|
+
}
|
72
|
+
});
|
73
|
+
if(opts.keepAlive){
|
74
|
+
tiptip_holder.hover(function(){}, function(){
|
75
|
+
deactive_tiptip();
|
76
|
+
});
|
77
|
+
}
|
78
|
+
} else if(opts.activation == "focus"){
|
79
|
+
org_elem.focus(function(){
|
80
|
+
active_tiptip();
|
81
|
+
}).blur(function(){
|
82
|
+
deactive_tiptip();
|
83
|
+
});
|
84
|
+
} else if(opts.activation == "click"){
|
85
|
+
org_elem.click(function(){
|
86
|
+
active_tiptip();
|
87
|
+
return false;
|
88
|
+
}).hover(function(){},function(){
|
89
|
+
if(!opts.keepAlive){
|
90
|
+
deactive_tiptip();
|
91
|
+
}
|
92
|
+
});
|
93
|
+
if(opts.keepAlive){
|
94
|
+
tiptip_holder.hover(function(){}, function(){
|
95
|
+
deactive_tiptip();
|
96
|
+
});
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
100
|
+
function active_tiptip(){
|
101
|
+
opts.enter.call(this);
|
102
|
+
tiptip_content.html(org_title);
|
103
|
+
tiptip_holder.hide().removeAttr("class").css("margin","0");
|
104
|
+
tiptip_arrow.removeAttr("style");
|
105
|
+
|
106
|
+
var top = parseInt(org_elem.offset()['top']);
|
107
|
+
var left = parseInt(org_elem.offset()['left']);
|
108
|
+
var org_width = parseInt(org_elem.outerWidth());
|
109
|
+
var org_height = parseInt(org_elem.outerHeight());
|
110
|
+
var tip_w = tiptip_holder.outerWidth();
|
111
|
+
var tip_h = tiptip_holder.outerHeight();
|
112
|
+
var w_compare = Math.round((org_width - tip_w) / 2);
|
113
|
+
var h_compare = Math.round((org_height - tip_h) / 2);
|
114
|
+
var marg_left = Math.round(left + w_compare);
|
115
|
+
var marg_top = Math.round(top + org_height + opts.edgeOffset);
|
116
|
+
var t_class = "";
|
117
|
+
var arrow_top = "";
|
118
|
+
var arrow_left = Math.round(tip_w - 12) / 2;
|
119
|
+
|
120
|
+
if(opts.defaultPosition == "bottom"){
|
121
|
+
t_class = "_bottom";
|
122
|
+
} else if(opts.defaultPosition == "top"){
|
123
|
+
t_class = "_top";
|
124
|
+
} else if(opts.defaultPosition == "left"){
|
125
|
+
t_class = "_left";
|
126
|
+
} else if(opts.defaultPosition == "right"){
|
127
|
+
t_class = "_right";
|
128
|
+
}
|
129
|
+
|
130
|
+
var right_compare = (w_compare + left) < parseInt($(window).scrollLeft());
|
131
|
+
var left_compare = (tip_w + left) > parseInt($(window).width());
|
132
|
+
|
133
|
+
if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){
|
134
|
+
t_class = "_right";
|
135
|
+
arrow_top = Math.round(tip_h - 13) / 2;
|
136
|
+
arrow_left = -12;
|
137
|
+
marg_left = Math.round(left + org_width + opts.edgeOffset);
|
138
|
+
marg_top = Math.round(top + h_compare);
|
139
|
+
} else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){
|
140
|
+
t_class = "_left";
|
141
|
+
arrow_top = Math.round(tip_h - 13) / 2;
|
142
|
+
arrow_left = Math.round(tip_w);
|
143
|
+
marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5));
|
144
|
+
marg_top = Math.round(top + h_compare);
|
145
|
+
}
|
146
|
+
|
147
|
+
var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop());
|
148
|
+
var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0;
|
149
|
+
|
150
|
+
if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){
|
151
|
+
if(t_class == "_top" || t_class == "_bottom"){
|
152
|
+
t_class = "_top";
|
153
|
+
} else {
|
154
|
+
t_class = t_class+"_top";
|
155
|
+
}
|
156
|
+
arrow_top = tip_h;
|
157
|
+
marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset));
|
158
|
+
} else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){
|
159
|
+
if(t_class == "_top" || t_class == "_bottom"){
|
160
|
+
t_class = "_bottom";
|
161
|
+
} else {
|
162
|
+
t_class = t_class+"_bottom";
|
163
|
+
}
|
164
|
+
arrow_top = -12;
|
165
|
+
marg_top = Math.round(top + org_height + opts.edgeOffset);
|
166
|
+
}
|
167
|
+
|
168
|
+
if(t_class == "_right_top" || t_class == "_left_top"){
|
169
|
+
marg_top = marg_top + 5;
|
170
|
+
} else if(t_class == "_right_bottom" || t_class == "_left_bottom"){
|
171
|
+
marg_top = marg_top - 5;
|
172
|
+
}
|
173
|
+
if(t_class == "_left_top" || t_class == "_left_bottom"){
|
174
|
+
marg_left = marg_left + 5;
|
175
|
+
}
|
176
|
+
tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"});
|
177
|
+
tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class);
|
178
|
+
|
179
|
+
if (timeout){ clearTimeout(timeout); }
|
180
|
+
timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay);
|
181
|
+
}
|
182
|
+
|
183
|
+
function deactive_tiptip(){
|
184
|
+
opts.exit.call(this);
|
185
|
+
if (timeout){ clearTimeout(timeout); }
|
186
|
+
tiptip_holder.fadeOut(opts.fadeOut);
|
187
|
+
}
|
188
|
+
}
|
189
|
+
});
|
190
|
+
}
|
191
|
+
})(jQuery);
|
@@ -0,0 +1,113 @@
|
|
1
|
+
/* TipTip CSS - Version 1.2 */
|
2
|
+
|
3
|
+
#tiptip_holder {
|
4
|
+
display: none;
|
5
|
+
position: absolute;
|
6
|
+
top: 0;
|
7
|
+
left: 0;
|
8
|
+
z-index: 99999;
|
9
|
+
}
|
10
|
+
|
11
|
+
#tiptip_holder.tip_top {
|
12
|
+
padding-bottom: 5px;
|
13
|
+
}
|
14
|
+
|
15
|
+
#tiptip_holder.tip_bottom {
|
16
|
+
padding-top: 5px;
|
17
|
+
}
|
18
|
+
|
19
|
+
#tiptip_holder.tip_right {
|
20
|
+
padding-left: 5px;
|
21
|
+
}
|
22
|
+
|
23
|
+
#tiptip_holder.tip_left {
|
24
|
+
padding-right: 5px;
|
25
|
+
}
|
26
|
+
|
27
|
+
#tiptip_content {
|
28
|
+
font-size: 11px;
|
29
|
+
color: #fff;
|
30
|
+
text-shadow: 0 0 2px #000;
|
31
|
+
padding: 4px 8px;
|
32
|
+
border: 1px solid rgba(255,255,255,0.25);
|
33
|
+
background-color: rgb(25,25,25);
|
34
|
+
background-color: rgba(25,25,25,0.92);
|
35
|
+
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
|
36
|
+
border-radius: 3px;
|
37
|
+
-webkit-border-radius: 3px;
|
38
|
+
-moz-border-radius: 3px;
|
39
|
+
box-shadow: 0 0 3px #555;
|
40
|
+
-webkit-box-shadow: 0 0 3px #555;
|
41
|
+
-moz-box-shadow: 0 0 3px #555;
|
42
|
+
}
|
43
|
+
|
44
|
+
#tiptip_arrow, #tiptip_arrow_inner {
|
45
|
+
position: absolute;
|
46
|
+
border-color: transparent;
|
47
|
+
border-style: solid;
|
48
|
+
border-width: 6px;
|
49
|
+
height: 0;
|
50
|
+
width: 0;
|
51
|
+
}
|
52
|
+
|
53
|
+
#tiptip_holder.tip_top #tiptip_arrow {
|
54
|
+
border-top-color: #fff;
|
55
|
+
border-top-color: rgba(255,255,255,0.35);
|
56
|
+
}
|
57
|
+
|
58
|
+
#tiptip_holder.tip_bottom #tiptip_arrow {
|
59
|
+
border-bottom-color: #fff;
|
60
|
+
border-bottom-color: rgba(255,255,255,0.35);
|
61
|
+
}
|
62
|
+
|
63
|
+
#tiptip_holder.tip_right #tiptip_arrow {
|
64
|
+
border-right-color: #fff;
|
65
|
+
border-right-color: rgba(255,255,255,0.35);
|
66
|
+
}
|
67
|
+
|
68
|
+
#tiptip_holder.tip_left #tiptip_arrow {
|
69
|
+
border-left-color: #fff;
|
70
|
+
border-left-color: rgba(255,255,255,0.35);
|
71
|
+
}
|
72
|
+
|
73
|
+
#tiptip_holder.tip_top #tiptip_arrow_inner {
|
74
|
+
margin-top: -7px;
|
75
|
+
margin-left: -6px;
|
76
|
+
border-top-color: rgb(25,25,25);
|
77
|
+
border-top-color: rgba(25,25,25,0.92);
|
78
|
+
}
|
79
|
+
|
80
|
+
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
|
81
|
+
margin-top: -5px;
|
82
|
+
margin-left: -6px;
|
83
|
+
border-bottom-color: rgb(25,25,25);
|
84
|
+
border-bottom-color: rgba(25,25,25,0.92);
|
85
|
+
}
|
86
|
+
|
87
|
+
#tiptip_holder.tip_right #tiptip_arrow_inner {
|
88
|
+
margin-top: -6px;
|
89
|
+
margin-left: -5px;
|
90
|
+
border-right-color: rgb(25,25,25);
|
91
|
+
border-right-color: rgba(25,25,25,0.92);
|
92
|
+
}
|
93
|
+
|
94
|
+
#tiptip_holder.tip_left #tiptip_arrow_inner {
|
95
|
+
margin-top: -6px;
|
96
|
+
margin-left: -7px;
|
97
|
+
border-left-color: rgb(25,25,25);
|
98
|
+
border-left-color: rgba(25,25,25,0.92);
|
99
|
+
}
|
100
|
+
|
101
|
+
/* Webkit Hacks */
|
102
|
+
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
103
|
+
#tiptip_content {
|
104
|
+
padding: 4px 8px 5px 8px;
|
105
|
+
background-color: rgba(45,45,45,0.88);
|
106
|
+
}
|
107
|
+
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
|
108
|
+
border-bottom-color: rgba(45,45,45,0.88);
|
109
|
+
}
|
110
|
+
#tiptip_holder.tip_top #tiptip_arrow_inner {
|
111
|
+
border-top-color: rgba(20,20,20,0.92);
|
112
|
+
}
|
113
|
+
}
|
data/lib/tiptip-rails.rb
ADDED
data/lib/tiptip/rails.rb
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
|
4
|
+
Gem::Specification.new do |s|
|
5
|
+
s.name = "tiptip-rails"
|
6
|
+
s.version = "1.0.0"
|
7
|
+
s.authors = ["TheDartCode"]
|
8
|
+
s.email = ["giorgos@thedartcode.com"]
|
9
|
+
s.homepage = "http://www.thedartcode.com/"
|
10
|
+
s.summary = %q{Gem for easily adding TipTip to the Rails Asset Pipeline}
|
11
|
+
s.description = %q{Gem that includes TipTip, in the Rails Asset Pipeline introduced in Rails 3.1}
|
12
|
+
|
13
|
+
s.files = `git ls-files`.split("\n")
|
14
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
15
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
16
|
+
s.require_paths = ["lib"]
|
17
|
+
|
18
|
+
s.add_dependency "railties", ">= 3.1"
|
19
|
+
s.add_development_dependency "bundler", "~> 1.0"
|
20
|
+
s.add_development_dependency "rails", ">= 3.1"
|
21
|
+
end
|
metadata
ADDED
@@ -0,0 +1,118 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: tiptip-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
hash: 23
|
5
|
+
prerelease:
|
6
|
+
segments:
|
7
|
+
- 1
|
8
|
+
- 0
|
9
|
+
- 0
|
10
|
+
version: 1.0.0
|
11
|
+
platform: ruby
|
12
|
+
authors:
|
13
|
+
- TheDartCode
|
14
|
+
autorequire:
|
15
|
+
bindir: bin
|
16
|
+
cert_chain: []
|
17
|
+
|
18
|
+
date: 2015-01-20 00:00:00 Z
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
name: railties
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
none: false
|
25
|
+
requirements:
|
26
|
+
- - ">="
|
27
|
+
- !ruby/object:Gem::Version
|
28
|
+
hash: 5
|
29
|
+
segments:
|
30
|
+
- 3
|
31
|
+
- 1
|
32
|
+
version: "3.1"
|
33
|
+
type: :runtime
|
34
|
+
version_requirements: *id001
|
35
|
+
- !ruby/object:Gem::Dependency
|
36
|
+
name: bundler
|
37
|
+
prerelease: false
|
38
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
39
|
+
none: false
|
40
|
+
requirements:
|
41
|
+
- - ~>
|
42
|
+
- !ruby/object:Gem::Version
|
43
|
+
hash: 15
|
44
|
+
segments:
|
45
|
+
- 1
|
46
|
+
- 0
|
47
|
+
version: "1.0"
|
48
|
+
type: :development
|
49
|
+
version_requirements: *id002
|
50
|
+
- !ruby/object:Gem::Dependency
|
51
|
+
name: rails
|
52
|
+
prerelease: false
|
53
|
+
requirement: &id003 !ruby/object:Gem::Requirement
|
54
|
+
none: false
|
55
|
+
requirements:
|
56
|
+
- - ">="
|
57
|
+
- !ruby/object:Gem::Version
|
58
|
+
hash: 5
|
59
|
+
segments:
|
60
|
+
- 3
|
61
|
+
- 1
|
62
|
+
version: "3.1"
|
63
|
+
type: :development
|
64
|
+
version_requirements: *id003
|
65
|
+
description: Gem that includes TipTip, in the Rails Asset Pipeline introduced in Rails 3.1
|
66
|
+
email:
|
67
|
+
- giorgos@thedartcode.com
|
68
|
+
executables: []
|
69
|
+
|
70
|
+
extensions: []
|
71
|
+
|
72
|
+
extra_rdoc_files: []
|
73
|
+
|
74
|
+
files:
|
75
|
+
- .gitignore
|
76
|
+
- Gemfile
|
77
|
+
- README.md
|
78
|
+
- app/assets/javascripts/tipTip.js
|
79
|
+
- app/assets/stylesheets/tipTip.css
|
80
|
+
- lib/tiptip-rails.rb
|
81
|
+
- lib/tiptip/rails.rb
|
82
|
+
- lib/tiptip/version.rb
|
83
|
+
- tiptip-rails.gemspec
|
84
|
+
homepage: http://www.thedartcode.com/
|
85
|
+
licenses: []
|
86
|
+
|
87
|
+
post_install_message:
|
88
|
+
rdoc_options: []
|
89
|
+
|
90
|
+
require_paths:
|
91
|
+
- lib
|
92
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
93
|
+
none: false
|
94
|
+
requirements:
|
95
|
+
- - ">="
|
96
|
+
- !ruby/object:Gem::Version
|
97
|
+
hash: 3
|
98
|
+
segments:
|
99
|
+
- 0
|
100
|
+
version: "0"
|
101
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
102
|
+
none: false
|
103
|
+
requirements:
|
104
|
+
- - ">="
|
105
|
+
- !ruby/object:Gem::Version
|
106
|
+
hash: 3
|
107
|
+
segments:
|
108
|
+
- 0
|
109
|
+
version: "0"
|
110
|
+
requirements: []
|
111
|
+
|
112
|
+
rubyforge_project:
|
113
|
+
rubygems_version: 1.8.15
|
114
|
+
signing_key:
|
115
|
+
specification_version: 3
|
116
|
+
summary: Gem for easily adding TipTip to the Rails Asset Pipeline
|
117
|
+
test_files: []
|
118
|
+
|