awesome_tooltip 0.1.6 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d27f390318b9b90c3f0bfaf3ba557e5794505862aa0ec4f197ae2bc2f1ede003
-  data.tar.gz: 4850f277a12711b7b8adbef4167f9f58b83580956a97b5688a68b63a8ad09ac6
+  metadata.gz: b4333fbdabb7aafcf0d982f404459cc6d30567dc616b58f2fe752a206d0a6943
+  data.tar.gz: 810a29db2d57b379936fd6c50d5efc23de2506a79c3143aae26f42af0602df66
 SHA512:
-  metadata.gz: 128b87a5ff59fabafc54b3635ee066ad8f17dc9817447154516b55bd80dca11bb25a981b1fb51c4b9e34eeae67cefdd89773858cb24af9a319b92dc69873475f
-  data.tar.gz: 5b8ad0d1f03b45bd27b76f588c8c38acc0b9f2ebf3fef707ec6259ac5e22a656a6408ab76628afc24ef5d5409054b01775812081df0df3d6a1f0431966de490a
+  metadata.gz: 6432fe70dd74c8051a69a3ddfc9706f6474be105d41426970189482cf45463398b4e47230026fdde472442a2e432235a8b50ae463d382dd71b89d5e0feb5acfe
+  data.tar.gz: 2a8c34935d1e5ef9b26243e8293cbcc38528d718f7149543fe5107b4132c54cb6cd3597a7f4715f250ce68a0a92ebb28b79ecaf9dcf312622a49f7cfba7f5db6

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.
+Lightwere 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,60 @@ 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
+```
+
+## 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-loacation="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,6 +1,7 @@
 (function (W, D) {
   var loadType;
-  var timerId;
+  var hideDelayTimeId;
+  var showDelayTimeId;
   var config = {
     tooltipPath: "/tooltip/",
     delay: 1500,
@@ -15,21 +16,29 @@
 
   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);
     });
   }
@@ -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;
+  display: inline-block;
+  cursor: pointer;
 
   .awesome-tooltip {
     position: absolute;

data/lib/awesome_tooltip/version.rb

@@ -1,3 +1,3 @@
 module AwesomeTooltip
-  VERSION = '0.1.6'
+  VERSION = '0.1.12'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: awesome_tooltip
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.12
 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