awesome_tooltip 0.1.10 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee17f8477a6ae94f8d6f7011f2133cbd58f0a33663f28bc3010792a6e826b735
-  data.tar.gz: f80d0cf419a9d75ff5cf8be288b957d1bf49d9a23f08bdca0e2d9b68a0cf583c
+  metadata.gz: 0f032dee2c48043e724be7173e3f7ba3e11a7ed7597939b343dc96b4a2e3a632
+  data.tar.gz: 426a4d6bc6980fe95c2c8d80eeb04a0387438cfdb1aad6e1135c5bd19a93eeb4
 SHA512:
-  metadata.gz: 71bba3c47aa1b1dcd60328d19014feb26d0372324b9ad142eaf5974d228da0e971be35fc44c011b3fdf95aef5103ef2c52ea65beb03b6507682ddf5c76f8085f
-  data.tar.gz: b873d5a38d29cb132daab27187b6a0e20023ba52ac65650342b433c98b678087c0d801db4e3f8cac61eb6307f08efef94d1de24f4608a2deb91b7efb31ab7ea8
+  metadata.gz: 8fd64bd6850dfa6fd2f53872ce57f7a8e8257d1f4d0be09243f7abd8bab48422f8ec45543665150e892d4b614a3697b54f1476aa9978f7dacbf438361f9485fc
+  data.tar.gz: 8eada3a339bbab7e8b33279c3ec6af6c6ed3b7a4d79b72c32a1cf8f004697ecb9c72bd296bd9f388b239932f873a4a5c81fdddf17de440a0f25a8a69879f3dc4

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-block;
+  cursor: pointer;
 
   .awesome-tooltip {
     position: absolute;

data/lib/awesome_tooltip/version.rb

@@ -1,3 +1,3 @@
 module AwesomeTooltip
-  VERSION = '0.1.10'
+  VERSION = '0.1.11'
 end

metadata

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