awesome_tooltip 0.1.7 → 0.1.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75d8aa3370dc6779c172e4f10760e666e031856cf6b82197e1cda3d202c758d0
-  data.tar.gz: 70dfc410d850b30104091d8ec3df2b77fa7fb869b0853646881526d82c7cb189
+  metadata.gz: dad2a5d9423fd95f2ccad59d86e6332128715adb7a10c861ba410e80b05d6367
+  data.tar.gz: b4563f9fe7721d69c5d3b63c103a3317ac766d7428de69d93f4f403e249c4f9f
 SHA512:
-  metadata.gz: 858671e64436baccdfa9f267d256de22336c56636fbec7cff99e39610b0ad16bd666d78cf4cff3ce1592d5b8d0fee869916f5d6c5457c28c8ab12ff6963b6b72
-  data.tar.gz: 46bf3cb1da46b3a1ba0041fa7fcba4e3400e75a004bef8e7a732438e78b0d03e8e93c78a50b1643be81be82f83470302ff1e79ecaa6690b97a4348d4c9835657
+  metadata.gz: a962cc05ca20cc55d82e975a4fb9aa02b5b4f22fe2bfc7930b5805e0540245e1a76c96e6b0690959e8784e106775e5b93321de0ea5ec52fdf144fbb006ae7fd7
+  data.tar.gz: 2d616393b9d932ee4fa5cd592d6ba7abcbc53013b764fc0e8db418562e3faa5bad5208f2758833667f508f94be68a415bcbd086a84535c4f0fb9aea9e66e5657

data/README.md

@@ -2,10 +2,7 @@
 [![Build Status](https://travis-ci.com/BogdanBusko/awesome_tooltip.svg?branch=master)](https://travis-ci.com/BogdanBusko/awesome_tooltip)
 [![Maintainability](https://api.codeclimate.com/v1/badges/13a8f6106b17b50e9943/maintainability)](https://codeclimate.com/github/BogdanBusko/awesome_tooltip/maintainability)
 
-Short description and motivation.
-
-## Usage
-How to use my plugin.
+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.
 
 ## Installation
 Add this line to your application's Gemfile:
@@ -24,6 +21,75 @@ Or install it yourself as:
 $ gem install awesome_tooltip
 ```
 
+## Configuration
+
+Mount AwesomeTooltip routes in to your config/routes.rb
+```ruby
+mount AwesomeTooltip::Engine => '/', as: 'awesome_tooltip'
+```
+
+Require AwesomeTooltip javascript in to your application.js
+```javascript
+//= require awesome_tooltip/tootlip
+```
+
+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.
+
+Require AwesomeTooltip styles
+```css
+/*
+ *= require awesome_tooltip/tooltip
+ */
+```
+
+Create folder for you tooltip templates
+```bash
+$ mkdir app/awesome_tooltips
+```
+
+And now just add template.
+```bash
+$ touch app/awesome_tooltips/template.html.erb
+```
+
+Also you can update js configurations
+```javascript
+AwesomeTooltip({
+  tooltipPath: '/your/custom/path/',
+  delay: 2000,
+  location: 'bottom'
+});
+```
+
+| Option | Default value | Type |
+|--------|---------------|------|
+| tooltipPath | /tooltip/ | String |
+| hideDelay | 1500 | Integer |
+| location | top(also available bottom) | String | 
+
+## Usage
+
+To start using AwesomeTooltip add following attributes to HTML element 
+```html
+<div class="awesome_tooltip" 
+     data-template="user_template"
+     data-object="user-1"
+     data-location="bottom">John Doe</div>
+```
+
+Also you can use static templates
+
+| Option | Description | Value example | Optional |
+|--------|-------------|---------------|----------|
+| data-template | Path to your template(root dir for template is app/awesome_tooltips) | project | false |
+| data-object | Model name and object id separated by dash | project-1 | true |
+| data-location | Tooltip location | bottom | true |
+
+## TODO:
+  - Add generators
+  - Add configs
+  - Add ability to place tooltip on the left and right side
+
 ## Contributing
 Contribution directions go here.
 

data/app/assets/javascripts/awesome_tooltip/tooltip.js

@@ -1,9 +1,10 @@
 (function (W, D) {
   var loadType;
-  var timerId;
+  var hideDelayTimeId;
+  var showDelayTimeId;
   var config = {
     tooltipPath: "/tooltip/",
-    delay: 1500,
+    hideDelay: 1500,
     location: "top"
   };
 
@@ -15,22 +16,30 @@
 
   function handleMouseEnter(element) {
     element.addEventListener("mouseenter", function(e) {
-      clearTimeout(timerId);
+      var element = e.currentTarget;
 
-      if(e.currentTarget.getAttribute("data-template") && !e.currentTarget.querySelector(".awesome-tooltip")) {
-        fetchData(e.currentTarget);
-      }
+      clearTimeout(hideDelayTimeId);
+
+      showDelayTimeId = setTimeout(function() {
+        if(element.getAttribute("data-template") && !element.querySelector(".awesome-tooltip")) {
+          fetchData(element);
+        }
+      }, 500);
     });
   }
 
   function handleMouseLeave(element) {
     element.addEventListener("mouseleave", function(e){
-      var tooltip = e.currentTarget.querySelector("." + e.currentTarget.className.split(" ").join(".") + " .awesome-tooltip");
+      var element = e.currentTarget;
+      var tooltip = element.querySelector("." + element.className.split(" ").join(".") + " .awesome-tooltip");
 
-      timerId = setTimeout(function() {
-        if(tooltip)
+      clearTimeout(showDelayTimeId);
+
+      hideDelayTimeId = setTimeout(function() {
+        if(tooltip) {
           tooltip.remove();
-      }, config.delay);
+        }
+      }, config.hideDelay);
     });
   }
 
@@ -39,10 +48,14 @@
     var tooltipTriangle = tooltip.querySelector(".content-wrapper .triangle");
     var elementRects    = element.getClientRects()[0];
 
-    var leftEnoughSpace   = tooltip.offsetWidth / 2 + element.offsetWidth / 2 < elementRects.left;
-    var rightEnoughSpace  = tooltip.offsetWidth / 2  < D.body.offsetWidth - elementRects.right;
-    var bottomEnoughSpace = tooltip.offsetHeight < W.outerHeight - elementRects.bottom;
-    var topEnoughSpace    = tooltip.offsetHeight + tooltipTriangle.offsetHeight < elementRects.top;
+    var tHeight = tooltip.offsetHeight;
+    var tWidth  = tooltip.offsetWidth;
+    var eWidth  = element.offsetWidth;
+
+    var leftEnoughSpace   = tWidth / 2 + eWidth / 2 < elementRects.left;
+    var rightEnoughSpace  = tWidth / 2  < D.body.offsetWidth - elementRects.right;
+    var bottomEnoughSpace = tHeight < W.outerHeight - elementRects.bottom;
+    var topEnoughSpace    = tHeight + tooltipTriangle.offsetHeight < elementRects.top;
 
     if(leftEnoughSpace && rightEnoughSpace && topEnoughSpace && bottomEnoughSpace) {
       tooltip.style.cssText = "left: " + ((elementRects.width / 2) - (tooltip.getClientRects()[0].width / 2)) + "px;";
@@ -71,8 +84,8 @@
 
       if(!leftEnoughSpace || !rightEnoughSpace) {
         if(W.innerWidth / 2 > elementRects.right) {
-          tooltip.style.cssText = "left: -" + (elementRects.right - element.offsetWidth) + "px;";
-          tooltipTriangle.style.cssText = "left: " + (elementRects.right - element.offsetWidth + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
+          tooltip.style.cssText = "left: -" + (elementRects.right - eWidth) + "px;";
+          tooltipTriangle.style.cssText = "left: " + (elementRects.right - eWidth + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
         } else {
           tooltip.style.cssText = "right: -" + (D.body.offsetWidth - elementRects.right) + "px;";
           tooltipTriangle.style.cssText = "right: " + (D.body.offsetWidth - elementRects.right + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";

data/app/assets/stylesheets/awesome_tooltip/tooltip.scss

@@ -1,6 +1,7 @@
 .awesome-tooltip-wrapper {
   position: relative;
   display: inline-block;
+  cursor: pointer;
 
   .awesome-tooltip {
     position: absolute;

data/lib/awesome_tooltip/version.rb

@@ -1,3 +1,3 @@
 module AwesomeTooltip
-  VERSION = '0.1.7'
+  VERSION = '0.1.13'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: awesome_tooltip
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.13
 platform: ruby
 authors:
 - Busko Bogdan
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-02-19 00:00:00.000000000 Z
+date: 2020-02-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails