awesome_tooltip 0.1.7 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: dad2a5d9423fd95f2ccad59d86e6332128715adb7a10c861ba410e80b05d6367
|
|
4
|
+
data.tar.gz: b4563f9fe7721d69c5d3b63c103a3317ac766d7428de69d93f4f403e249c4f9f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a962cc05ca20cc55d82e975a4fb9aa02b5b4f22fe2bfc7930b5805e0540245e1a76c96e6b0690959e8784e106775e5b93321de0ea5ec52fdf144fbb006ae7fd7
|
|
7
|
+
data.tar.gz: 2d616393b9d932ee4fa5cd592d6ba7abcbc53013b764fc0e8db418562e3faa5bad5208f2758833667f508f94be68a415bcbd086a84535c4f0fb9aea9e66e5657
|
data/README.md
CHANGED
|
@@ -2,10 +2,7 @@
|
|
|
2
2
|
[](https://travis-ci.com/BogdanBusko/awesome_tooltip)
|
|
3
3
|
[](https://codeclimate.com/github/BogdanBusko/awesome_tooltip/maintainability)
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## Usage
|
|
8
|
-
How to use my plugin.
|
|
5
|
+
Lightwer get for loading tooltips on your page without preloading this data on page. With this gem you can load static template and templates with data from database.
|
|
9
6
|
|
|
10
7
|
## Installation
|
|
11
8
|
Add this line to your application's Gemfile:
|
|
@@ -24,6 +21,75 @@ Or install it yourself as:
|
|
|
24
21
|
$ gem install awesome_tooltip
|
|
25
22
|
```
|
|
26
23
|
|
|
24
|
+
## Configuration
|
|
25
|
+
|
|
26
|
+
Mount AwesomeTooltip routes in to your config/routes.rb
|
|
27
|
+
```ruby
|
|
28
|
+
mount AwesomeTooltip::Engine => '/', as: 'awesome_tooltip'
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Require AwesomeTooltip javascript in to your application.js
|
|
32
|
+
```javascript
|
|
33
|
+
//= require awesome_tooltip/tootlip
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
If you are using Rails 6 with webpack you must create folder javascripts with file application.js in your assets folder and require javascript there.
|
|
37
|
+
|
|
38
|
+
Require AwesomeTooltip styles
|
|
39
|
+
```css
|
|
40
|
+
/*
|
|
41
|
+
*= require awesome_tooltip/tooltip
|
|
42
|
+
*/
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Create folder for you tooltip templates
|
|
46
|
+
```bash
|
|
47
|
+
$ mkdir app/awesome_tooltips
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
And now just add template.
|
|
51
|
+
```bash
|
|
52
|
+
$ touch app/awesome_tooltips/template.html.erb
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Also you can update js configurations
|
|
56
|
+
```javascript
|
|
57
|
+
AwesomeTooltip({
|
|
58
|
+
tooltipPath: '/your/custom/path/',
|
|
59
|
+
delay: 2000,
|
|
60
|
+
location: 'bottom'
|
|
61
|
+
});
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
| Option | Default value | Type |
|
|
65
|
+
|--------|---------------|------|
|
|
66
|
+
| tooltipPath | /tooltip/ | String |
|
|
67
|
+
| hideDelay | 1500 | Integer |
|
|
68
|
+
| location | top(also available bottom) | String |
|
|
69
|
+
|
|
70
|
+
## Usage
|
|
71
|
+
|
|
72
|
+
To start using AwesomeTooltip add following attributes to HTML element
|
|
73
|
+
```html
|
|
74
|
+
<div class="awesome_tooltip"
|
|
75
|
+
data-template="user_template"
|
|
76
|
+
data-object="user-1"
|
|
77
|
+
data-location="bottom">John Doe</div>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Also you can use static templates
|
|
81
|
+
|
|
82
|
+
| Option | Description | Value example | Optional |
|
|
83
|
+
|--------|-------------|---------------|----------|
|
|
84
|
+
| data-template | Path to your template(root dir for template is app/awesome_tooltips) | project | false |
|
|
85
|
+
| data-object | Model name and object id separated by dash | project-1 | true |
|
|
86
|
+
| data-location | Tooltip location | bottom | true |
|
|
87
|
+
|
|
88
|
+
## TODO:
|
|
89
|
+
- Add generators
|
|
90
|
+
- Add configs
|
|
91
|
+
- Add ability to place tooltip on the left and right side
|
|
92
|
+
|
|
27
93
|
## Contributing
|
|
28
94
|
Contribution directions go here.
|
|
29
95
|
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
(function (W, D) {
|
|
2
2
|
var loadType;
|
|
3
|
-
var
|
|
3
|
+
var hideDelayTimeId;
|
|
4
|
+
var showDelayTimeId;
|
|
4
5
|
var config = {
|
|
5
6
|
tooltipPath: "/tooltip/",
|
|
6
|
-
|
|
7
|
+
hideDelay: 1500,
|
|
7
8
|
location: "top"
|
|
8
9
|
};
|
|
9
10
|
|
|
@@ -15,22 +16,30 @@
|
|
|
15
16
|
|
|
16
17
|
function handleMouseEnter(element) {
|
|
17
18
|
element.addEventListener("mouseenter", function(e) {
|
|
18
|
-
|
|
19
|
+
var element = e.currentTarget;
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
clearTimeout(hideDelayTimeId);
|
|
22
|
+
|
|
23
|
+
showDelayTimeId = setTimeout(function() {
|
|
24
|
+
if(element.getAttribute("data-template") && !element.querySelector(".awesome-tooltip")) {
|
|
25
|
+
fetchData(element);
|
|
26
|
+
}
|
|
27
|
+
}, 500);
|
|
23
28
|
});
|
|
24
29
|
}
|
|
25
30
|
|
|
26
31
|
function handleMouseLeave(element) {
|
|
27
32
|
element.addEventListener("mouseleave", function(e){
|
|
28
|
-
var
|
|
33
|
+
var element = e.currentTarget;
|
|
34
|
+
var tooltip = element.querySelector("." + element.className.split(" ").join(".") + " .awesome-tooltip");
|
|
29
35
|
|
|
30
|
-
|
|
31
|
-
|
|
36
|
+
clearTimeout(showDelayTimeId);
|
|
37
|
+
|
|
38
|
+
hideDelayTimeId = setTimeout(function() {
|
|
39
|
+
if(tooltip) {
|
|
32
40
|
tooltip.remove();
|
|
33
|
-
|
|
41
|
+
}
|
|
42
|
+
}, config.hideDelay);
|
|
34
43
|
});
|
|
35
44
|
}
|
|
36
45
|
|
|
@@ -39,10 +48,14 @@
|
|
|
39
48
|
var tooltipTriangle = tooltip.querySelector(".content-wrapper .triangle");
|
|
40
49
|
var elementRects = element.getClientRects()[0];
|
|
41
50
|
|
|
42
|
-
var
|
|
43
|
-
var
|
|
44
|
-
var
|
|
45
|
-
|
|
51
|
+
var tHeight = tooltip.offsetHeight;
|
|
52
|
+
var tWidth = tooltip.offsetWidth;
|
|
53
|
+
var eWidth = element.offsetWidth;
|
|
54
|
+
|
|
55
|
+
var leftEnoughSpace = tWidth / 2 + eWidth / 2 < elementRects.left;
|
|
56
|
+
var rightEnoughSpace = tWidth / 2 < D.body.offsetWidth - elementRects.right;
|
|
57
|
+
var bottomEnoughSpace = tHeight < W.outerHeight - elementRects.bottom;
|
|
58
|
+
var topEnoughSpace = tHeight + tooltipTriangle.offsetHeight < elementRects.top;
|
|
46
59
|
|
|
47
60
|
if(leftEnoughSpace && rightEnoughSpace && topEnoughSpace && bottomEnoughSpace) {
|
|
48
61
|
tooltip.style.cssText = "left: " + ((elementRects.width / 2) - (tooltip.getClientRects()[0].width / 2)) + "px;";
|
|
@@ -71,8 +84,8 @@
|
|
|
71
84
|
|
|
72
85
|
if(!leftEnoughSpace || !rightEnoughSpace) {
|
|
73
86
|
if(W.innerWidth / 2 > elementRects.right) {
|
|
74
|
-
tooltip.style.cssText = "left: -" + (elementRects.right -
|
|
75
|
-
tooltipTriangle.style.cssText = "left: " + (elementRects.right -
|
|
87
|
+
tooltip.style.cssText = "left: -" + (elementRects.right - eWidth) + "px;";
|
|
88
|
+
tooltipTriangle.style.cssText = "left: " + (elementRects.right - eWidth + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
|
|
76
89
|
} else {
|
|
77
90
|
tooltip.style.cssText = "right: -" + (D.body.offsetWidth - elementRects.right) + "px;";
|
|
78
91
|
tooltipTriangle.style.cssText = "right: " + (D.body.offsetWidth - elementRects.right + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
|
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.13
|
|
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-02-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|