awesome_tooltip 0.1.14 → 0.1.15
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 353180cd5724e2ca7f0c2a6f5bf02d17fa4fdc6b2975d30e656ecf9e2ad59405
|
4
|
+
data.tar.gz: 19c5d18a1b7797dca40e13ccf2d3e86322446d62e8e9117efc0f7c71896fdbcc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9377c05d7f7e8f555a84975fe2fda34dcd03dbeadc7e00ea3f838fc8b12f81fce7689577ede7e8477ad48cbef4c1cd9f776f2a00b688008ec4b2fe7fc572eb62
|
7
|
+
data.tar.gz: 98419c1073ccf39d91248c84240b641b57967bed8037f236b1d7270daa895dafbf35a07ff931552f746eab0f4650ccc973a5e4e104f5e0469c793c71a354b8df
|
data/README.md
CHANGED
@@ -2,10 +2,12 @@
|
|
2
2
|
[![Build Status](https://travis-ci.com/BogdanBusko/awesome_tooltip.svg?branch=master)](https://travis-ci.com/BogdanBusko/awesome_tooltip)
|
3
3
|
[![Maintainability](https://api.codeclimate.com/v1/badges/13a8f6106b17b50e9943/maintainability)](https://codeclimate.com/github/BogdanBusko/awesome_tooltip/maintainability)
|
4
4
|
|
5
|
-
|
5
|
+
Lightweight gem for loading tooltips on your page without preloading. With this gem you can load static template, or templates with data from the database.
|
6
|
+
|
7
|
+
![](preview.gif)
|
6
8
|
|
7
9
|
## Installation
|
8
|
-
Add this line to your
|
10
|
+
Add this line to your applications' `Gemfile`:
|
9
11
|
|
10
12
|
```ruby
|
11
13
|
gem 'awesome_tooltip'
|
@@ -18,40 +20,40 @@ $ bundle
|
|
18
20
|
|
19
21
|
## Configuration
|
20
22
|
|
21
|
-
1. Mount AwesomeTooltip routes in to your config/routes.rb
|
23
|
+
1. Mount AwesomeTooltip routes in to your `config/routes.rb`
|
22
24
|
```ruby
|
23
25
|
mount AwesomeTooltip::Engine => '/', as: 'awesome_tooltip'
|
24
26
|
```
|
25
27
|
|
26
|
-
2. Require AwesomeTooltip javascript in to your application.js
|
28
|
+
2. Require AwesomeTooltip javascript in to your `application.js`. If you are using Rails 6 with webpack you must create `app/assets/javascripts` folder with `application.js` file and require javascript there.
|
27
29
|
```javascript
|
28
|
-
//= require awesome_tooltip/
|
30
|
+
//= require awesome_tooltip/tooltip
|
29
31
|
```
|
30
32
|
|
31
|
-
3. Require AwesomeTooltip styles
|
33
|
+
3. Require AwesomeTooltip styles:
|
32
34
|
```css
|
33
35
|
/*
|
34
36
|
*= require awesome_tooltip/tooltip
|
35
37
|
*/
|
36
38
|
```
|
37
39
|
|
38
|
-
4. Create folder for you tooltip templates
|
40
|
+
4. Create a folder for you tooltip templates:
|
39
41
|
```bash
|
40
42
|
$ mkdir app/awesome_tooltips
|
41
43
|
```
|
42
44
|
|
43
|
-
5. Add template
|
45
|
+
5. Add a template:
|
44
46
|
```bash
|
45
|
-
$ echo '<h1>This is your tooltip with static template</h1>' > template.html.erb
|
47
|
+
$ echo '<h1>This is your tooltip with static template</h1>' > app/awesome_tooltips/template.html.erb
|
46
48
|
```
|
47
49
|
|
48
|
-
6. Add code
|
50
|
+
6. Add following code to your page:
|
49
51
|
```html
|
50
52
|
<div class="awesome_tooltip" data-template="template">Element with tooltip</div>
|
51
53
|
```
|
52
54
|
|
53
55
|
## Usage
|
54
|
-
For example if you want tooltip with some external info for user you can create tooltip template with
|
56
|
+
For example, if you want a tooltip with some external info for a user, you can create a tooltip template with the following info in `app/awesome_tooltips/user_info.html.erb` folder:
|
55
57
|
```html
|
56
58
|
<div class="user-info">
|
57
59
|
<div class="user-fullname">
|
@@ -63,9 +65,9 @@ For example if you want tooltip with some external info for user you can create
|
|
63
65
|
</div>
|
64
66
|
```
|
65
67
|
|
66
|
-
|
68
|
+
Then add the following code to your page:
|
67
69
|
```html
|
68
|
-
<div class="awesome_tooltip" data-template="user_info" data-object="#{@user.class.downcase}-#{@user.id}"><%= @user.full_name %></div>
|
70
|
+
<div class="awesome_tooltip" data-template="user_info" data-object="#{@user.class.name.downcase}-#{@user.id}"><%= @user.full_name %></div>
|
69
71
|
```
|
70
72
|
|
71
73
|
## Configuration
|
@@ -76,7 +78,7 @@ After that add code below on your page
|
|
76
78
|
| **data-object** | Model name and object id separated by dash | project-1 | true |
|
77
79
|
| **data-location** | Tooltip location | bottom | true |
|
78
80
|
|
79
|
-
If you want to
|
81
|
+
If you want to override default javascript configuration, you can add the following code to you js file:
|
80
82
|
```javascript
|
81
83
|
AwesomeTooltip({
|
82
84
|
tooltipPath: '/your/custom/path/',
|
@@ -97,7 +99,11 @@ AwesomeTooltip({
|
|
97
99
|
- Add ability to place tooltip on the left and right side
|
98
100
|
|
99
101
|
## Contributing
|
100
|
-
|
102
|
+
- Fork it
|
103
|
+
- Create your feature branch (git checkout -b my-new-feature)
|
104
|
+
- Commit your changes (git commit -am 'Added some feature')
|
105
|
+
- Push to the branch (git push origin my-new-feature)
|
106
|
+
- Create new Pull Request
|
101
107
|
|
102
108
|
## License
|
103
109
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -1,7 +1,7 @@
|
|
1
1
|
(function (W, D) {
|
2
2
|
var loadType;
|
3
|
-
var
|
4
|
-
var
|
3
|
+
var hideDelayTimerId = {};
|
4
|
+
var showDelayTimerId = {};
|
5
5
|
var config = {
|
6
6
|
tooltipPath: "/tooltip/",
|
7
7
|
hideDelay: 1500,
|
@@ -17,10 +17,11 @@
|
|
17
17
|
function handleMouseEnter(element) {
|
18
18
|
element.addEventListener("mouseenter", function(e) {
|
19
19
|
var element = e.currentTarget;
|
20
|
+
var elementIndex = element.getAttribute("data-index");
|
20
21
|
|
21
|
-
clearTimeout(
|
22
|
+
clearTimeout(hideDelayTimerId[elementIndex]);
|
22
23
|
|
23
|
-
|
24
|
+
showDelayTimerId[elementIndex] = setTimeout(function() {
|
24
25
|
if(element.getAttribute("data-template") && !element.querySelector(".awesome-tooltip")) {
|
25
26
|
fetchData(element);
|
26
27
|
}
|
@@ -31,11 +32,12 @@
|
|
31
32
|
function handleMouseLeave(element) {
|
32
33
|
element.addEventListener("mouseleave", function(e){
|
33
34
|
var element = e.currentTarget;
|
35
|
+
var elementIndex = element.getAttribute("data-index");
|
34
36
|
var tooltip = element.querySelector("." + element.className.split(" ").join(".") + " .awesome-tooltip");
|
35
37
|
|
36
|
-
clearTimeout(
|
38
|
+
clearTimeout(showDelayTimerId[elementIndex]);
|
37
39
|
|
38
|
-
|
40
|
+
hideDelayTimerId[elementIndex] = setTimeout(function() {
|
39
41
|
if(tooltip) {
|
40
42
|
tooltip.remove();
|
41
43
|
}
|
@@ -51,21 +53,24 @@
|
|
51
53
|
var tHeight = tooltip.offsetHeight;
|
52
54
|
var tWidth = tooltip.offsetWidth;
|
53
55
|
var eWidth = element.offsetWidth;
|
56
|
+
var bodyWidth = D.body.offsetWidth;
|
54
57
|
|
55
58
|
var leftEnoughSpace = tWidth / 2 + eWidth / 2 < elementRects.left;
|
56
|
-
var rightEnoughSpace = tWidth / 2 <
|
59
|
+
var rightEnoughSpace = tWidth / 2 < bodyWidth - elementRects.right;
|
57
60
|
var bottomEnoughSpace = tHeight < W.outerHeight - elementRects.bottom;
|
58
61
|
var topEnoughSpace = tHeight + tooltipTriangle.offsetHeight < elementRects.top;
|
59
62
|
|
63
|
+
var location = element.getAttribute("data-location") ? "at-" + element.getAttribute("data-location") : "at-" + config.location;
|
64
|
+
|
60
65
|
if(leftEnoughSpace && rightEnoughSpace && topEnoughSpace && bottomEnoughSpace) {
|
61
66
|
tooltip.style.cssText = "left: " + ((elementRects.width / 2) - (tooltip.getClientRects()[0].width / 2)) + "px;";
|
62
67
|
tooltipTriangle.style.cssText = "left: calc(50% - " + (tooltipTriangle.offsetWidth / 2) + "px);";
|
63
68
|
return;
|
64
69
|
}
|
65
70
|
|
66
|
-
switch(
|
67
|
-
case "top":
|
68
|
-
case "bottom":
|
71
|
+
switch(location) {
|
72
|
+
case "at-top":
|
73
|
+
case "at-bottom":
|
69
74
|
if(!topEnoughSpace && leftEnoughSpace && rightEnoughSpace) {
|
70
75
|
display(element, tooltipTriangle, "bottom");
|
71
76
|
break;
|
@@ -87,8 +92,8 @@
|
|
87
92
|
tooltip.style.cssText = "left: -" + (elementRects.right - eWidth) + "px;";
|
88
93
|
tooltipTriangle.style.cssText = "left: " + (elementRects.right - eWidth + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
|
89
94
|
} else {
|
90
|
-
tooltip.style.cssText = "right: -" + (
|
91
|
-
tooltipTriangle.style.cssText = "right: " + (
|
95
|
+
tooltip.style.cssText = "right: -" + (bodyWidth - elementRects.right) + "px;";
|
96
|
+
tooltipTriangle.style.cssText = "right: " + (bodyWidth - elementRects.right + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
|
92
97
|
}
|
93
98
|
}
|
94
99
|
}
|
@@ -103,13 +108,13 @@
|
|
103
108
|
}
|
104
109
|
|
105
110
|
function toggleLocation(element, location) {
|
106
|
-
element.className = element.className.replace(/top|bottom|left|right/gi, "").trim();
|
107
|
-
element.className += " " + location;
|
111
|
+
element.className = element.className.replace(/at-top|at-bottom|at-left|at-right/gi, "").trim();
|
112
|
+
element.className += " " + "at-" + location;
|
108
113
|
element.className.trim();
|
109
114
|
}
|
110
115
|
|
111
116
|
function tooltipTemplate(element, text) {
|
112
|
-
var elementLocation = element.getAttribute("data-location")
|
117
|
+
var elementLocation = element.getAttribute("data-location") ? "at-" + element.getAttribute("data-location") : "at-" + config.location;
|
113
118
|
|
114
119
|
element.insertAdjacentHTML("beforeend",
|
115
120
|
"<div class=\"awesome-tooltip " + elementLocation + "\">" +
|
@@ -139,8 +144,9 @@
|
|
139
144
|
D.addEventListener(loadType, function() {
|
140
145
|
var tooltips = D.querySelectorAll(".awesome_tooltip");
|
141
146
|
|
142
|
-
tooltips.forEach(function(element) {
|
147
|
+
tooltips.forEach(function(element, index) {
|
143
148
|
element.className += element.className.length < 1 ? "awesome-tooltip-wrapper" : " awesome-tooltip-wrapper";
|
149
|
+
element.setAttribute("data-index", "awesome-tooltip" + index);
|
144
150
|
|
145
151
|
handleMouseEnter(element);
|
146
152
|
handleMouseLeave(element);
|
@@ -1,17 +1,17 @@
|
|
1
1
|
.awesome-tooltip-wrapper {
|
2
2
|
position: relative;
|
3
|
-
display: inline-block;
|
4
3
|
cursor: pointer;
|
5
4
|
|
6
5
|
.awesome-tooltip {
|
7
6
|
position: absolute;
|
8
7
|
background-color: #fff;
|
8
|
+
cursor: auto;
|
9
9
|
|
10
10
|
&.hidden {
|
11
11
|
display: none;
|
12
12
|
}
|
13
13
|
|
14
|
-
&.top {
|
14
|
+
&.at-top {
|
15
15
|
bottom: calc(100% + 10px);
|
16
16
|
|
17
17
|
.content-wrapper .triangle {
|
@@ -22,7 +22,7 @@
|
|
22
22
|
}
|
23
23
|
}
|
24
24
|
|
25
|
-
&.bottom {
|
25
|
+
&.at-bottom {
|
26
26
|
top: calc(100% + 10px);
|
27
27
|
|
28
28
|
.content-wrapper .triangle {
|
@@ -33,7 +33,7 @@
|
|
33
33
|
}
|
34
34
|
}
|
35
35
|
|
36
|
-
&.left {
|
36
|
+
&.at-left {
|
37
37
|
right: calc(100% + 10px);
|
38
38
|
|
39
39
|
.content-wrapper .triangle {
|
@@ -44,7 +44,7 @@
|
|
44
44
|
}
|
45
45
|
}
|
46
46
|
|
47
|
-
&.right {
|
47
|
+
&.at-right {
|
48
48
|
left: calc(100% + 10px);
|
49
49
|
|
50
50
|
.content-wrapper .triangle {
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: awesome_tooltip
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.15
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Busko Bogdan
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-02
|
11
|
+
date: 2020-03-02 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|