awesome_tooltip 0.1.13 → 0.1.14
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 +4 -4
- data/README.md +41 -35
- data/app/assets/javascripts/awesome_tooltip/tooltip.js +1 -1
- data/lib/awesome_tooltip/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ae0d1b35d3564bddc81e74963281f6819b0229f3ea8365c18e2bd674b127e3cc
|
|
4
|
+
data.tar.gz: 48a4177555c21e2cce0a23b41e1668e1c0511494e58faa4e51c328bdbc961dac
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b2ee119e5169fda2654956d4e4ebe96450832a58291b33c56b07f406cde3d32a820feea45b317a3464c3c80bcf94256596265da4cf526fd85a669303479eb3ee
|
|
7
|
+
data.tar.gz: 44c0e3dd3e282f7df96b83d28aed8dadf183347db79fd6e48755d63dcb4905d391be67b93a393d726e10303e35ae4019e53bca095c5677193cf8b22c471aa517
|
data/README.md
CHANGED
|
@@ -16,43 +16,67 @@ And then execute:
|
|
|
16
16
|
$ bundle
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
Or install it yourself as:
|
|
20
|
-
```bash
|
|
21
|
-
$ gem install awesome_tooltip
|
|
22
|
-
```
|
|
23
|
-
|
|
24
19
|
## Configuration
|
|
25
20
|
|
|
26
|
-
Mount AwesomeTooltip routes in to your config/routes.rb
|
|
21
|
+
1. Mount AwesomeTooltip routes in to your config/routes.rb
|
|
27
22
|
```ruby
|
|
28
23
|
mount AwesomeTooltip::Engine => '/', as: 'awesome_tooltip'
|
|
29
24
|
```
|
|
30
25
|
|
|
31
|
-
Require AwesomeTooltip javascript in to your application.js
|
|
26
|
+
2. Require AwesomeTooltip javascript in to your application.js. 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.
|
|
32
27
|
```javascript
|
|
33
28
|
//= require awesome_tooltip/tootlip
|
|
34
29
|
```
|
|
35
30
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
Require AwesomeTooltip styles
|
|
31
|
+
3. Require AwesomeTooltip styles
|
|
39
32
|
```css
|
|
40
33
|
/*
|
|
41
34
|
*= require awesome_tooltip/tooltip
|
|
42
35
|
*/
|
|
43
36
|
```
|
|
44
37
|
|
|
45
|
-
Create folder for you tooltip templates
|
|
38
|
+
4. Create folder for you tooltip templates
|
|
46
39
|
```bash
|
|
47
40
|
$ mkdir app/awesome_tooltips
|
|
48
41
|
```
|
|
49
42
|
|
|
50
|
-
|
|
43
|
+
5. Add template.
|
|
51
44
|
```bash
|
|
52
|
-
$
|
|
45
|
+
$ echo '<h1>This is your tooltip with static template</h1>' > template.html.erb
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
6. Add code below on your page
|
|
49
|
+
```html
|
|
50
|
+
<div class="awesome_tooltip" data-template="template">Element with tooltip</div>
|
|
53
51
|
```
|
|
54
52
|
|
|
55
|
-
|
|
53
|
+
## Usage
|
|
54
|
+
For example if you want tooltip with some external info for user you can create tooltip template with this info in folder app/awesome_tooltips/user_info.html.erb
|
|
55
|
+
```html
|
|
56
|
+
<div class="user-info">
|
|
57
|
+
<div class="user-fullname">
|
|
58
|
+
<%= @user.full_name %>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="email">
|
|
61
|
+
<%= @user.email %>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
After that add code below on your page
|
|
67
|
+
```html
|
|
68
|
+
<div class="awesome_tooltip" data-template="user_info" data-object="#{@user.class.downcase}-#{@user.id}"><%= @user.full_name %></div>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Configuration
|
|
72
|
+
**HTML attributes**
|
|
73
|
+
| Option | Description | Value example | Optional |
|
|
74
|
+
|--------|-------------|---------------|----------|
|
|
75
|
+
| **data-template** | Path to your template(root dir for template is app/awesome_tooltips) | project | false |
|
|
76
|
+
| **data-object** | Model name and object id separated by dash | project-1 | true |
|
|
77
|
+
| **data-location** | Tooltip location | bottom | true |
|
|
78
|
+
|
|
79
|
+
If you want to update some js configuration following code to your js file
|
|
56
80
|
```javascript
|
|
57
81
|
AwesomeTooltip({
|
|
58
82
|
tooltipPath: '/your/custom/path/',
|
|
@@ -63,27 +87,9 @@ AwesomeTooltip({
|
|
|
63
87
|
|
|
64
88
|
| Option | Default value | Type |
|
|
65
89
|
|--------|---------------|------|
|
|
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 |
|
|
90
|
+
| **tooltipPath** | /tooltip/ | String |
|
|
91
|
+
| **hideDelay** | 1500 | Integer |
|
|
92
|
+
| **location** | top(also available bottom) | String |
|
|
87
93
|
|
|
88
94
|
## TODO:
|
|
89
95
|
- Add generators
|