awesome_tooltip 0.1.14 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae0d1b35d3564bddc81e74963281f6819b0229f3ea8365c18e2bd674b127e3cc
-  data.tar.gz: 48a4177555c21e2cce0a23b41e1668e1c0511494e58faa4e51c328bdbc961dac
+  metadata.gz: 353180cd5724e2ca7f0c2a6f5bf02d17fa4fdc6b2975d30e656ecf9e2ad59405
+  data.tar.gz: 19c5d18a1b7797dca40e13ccf2d3e86322446d62e8e9117efc0f7c71896fdbcc
 SHA512:
-  metadata.gz: b2ee119e5169fda2654956d4e4ebe96450832a58291b33c56b07f406cde3d32a820feea45b317a3464c3c80bcf94256596265da4cf526fd85a669303479eb3ee
-  data.tar.gz: 44c0e3dd3e282f7df96b83d28aed8dadf183347db79fd6e48755d63dcb4905d391be67b93a393d726e10303e35ae4019e53bca095c5677193cf8b22c471aa517
+  metadata.gz: 9377c05d7f7e8f555a84975fe2fda34dcd03dbeadc7e00ea3f838fc8b12f81fce7689577ede7e8477ad48cbef4c1cd9f776f2a00b688008ec4b2fe7fc572eb62
+  data.tar.gz: 98419c1073ccf39d91248c84240b641b57967bed8037f236b1d7270daa895dafbf35a07ff931552f746eab0f4650ccc973a5e4e104f5e0469c793c71a354b8df

data/README.md

@@ -2,10 +2,12 @@
 [![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)
 
-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.
+Lightweight gem for loading tooltips on your page without preloading. With this gem you can load static template, or templates with data from the database.
+
+![](preview.gif)
 
 ## Installation
-Add this line to your application's Gemfile:
+Add this line to your applications' `Gemfile`:
 
 ```ruby
 gem 'awesome_tooltip'
@@ -18,40 +20,40 @@ $ bundle
 
 ## Configuration
 
-1. Mount AwesomeTooltip routes in to your config/routes.rb
+1. Mount AwesomeTooltip routes in to your `config/routes.rb`
 ```ruby
 mount AwesomeTooltip::Engine => '/', as: 'awesome_tooltip'
 ```
 
-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.
+2. Require AwesomeTooltip javascript in to your `application.js`. If you are using Rails 6 with webpack you must create `app/assets/javascripts` folder with `application.js` file and require javascript there.
 ```javascript
-//= require awesome_tooltip/tootlip
+//= require awesome_tooltip/tooltip
 ```
 
-3. Require AwesomeTooltip styles
+3. Require AwesomeTooltip styles:
 ```css
 /*
  *= require awesome_tooltip/tooltip
  */
 ```
 
-4. Create folder for you tooltip templates
+4. Create a folder for you tooltip templates:
 ```bash
 $ mkdir app/awesome_tooltips
 ```
 
-5. Add template.
+5. Add a template:
 ```bash
-$ echo '<h1>This is your tooltip with static template</h1>' > template.html.erb
+$ echo '<h1>This is your tooltip with static template</h1>' > app/awesome_tooltips/template.html.erb
 ```
 
-6. Add code below on your page
+6. Add following code to your page:
 ```html
 <div class="awesome_tooltip" data-template="template">Element with tooltip</div>
 ```
 
 ## Usage
-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
+For example, if you want a tooltip with some external info for a user, you can create a tooltip template with the following info in `app/awesome_tooltips/user_info.html.erb` folder: 
 ```html
 <div class="user-info">
   <div class="user-fullname">
@@ -63,9 +65,9 @@ For example if you want tooltip with some external info for user you can create
 </div>
 ``` 
 
-After that add code below on your page
+Then add the following code to your page:
 ```html
-<div class="awesome_tooltip" data-template="user_info" data-object="#{@user.class.downcase}-#{@user.id}"><%= @user.full_name %></div>
+<div class="awesome_tooltip" data-template="user_info" data-object="#{@user.class.name.downcase}-#{@user.id}"><%= @user.full_name %></div>
 ```
 
 ## Configuration
@@ -76,7 +78,7 @@ After that add code below on your page
 | **data-object** | Model name and object id separated by dash | project-1 | true |
 | **data-location** | Tooltip location | bottom | true |
 
-If you want to update some js configuration following code to your js file
+If you want to override default javascript configuration, you can add the following code to you js file:
 ```javascript
 AwesomeTooltip({
   tooltipPath: '/your/custom/path/',
@@ -97,7 +99,11 @@ AwesomeTooltip({
   - Add ability to place tooltip on the left and right side
 
 ## Contributing
-Contribution directions go here.
+- Fork it
+- Create your feature branch (git checkout -b my-new-feature)
+- Commit your changes (git commit -am 'Added some feature')
+- Push to the branch (git push origin my-new-feature)
+- Create new Pull Request
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

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

@@ -1,7 +1,7 @@
 (function (W, D) {
   var loadType;
-  var hideDelayTimeId;
-  var showDelayTimeId;
+  var hideDelayTimerId = {};
+  var showDelayTimerId = {};
   var config = {
     tooltipPath: "/tooltip/",
     hideDelay: 1500,
@@ -17,10 +17,11 @@
   function handleMouseEnter(element) {
     element.addEventListener("mouseenter", function(e) {
       var element = e.currentTarget;
+      var elementIndex = element.getAttribute("data-index");
 
-      clearTimeout(hideDelayTimeId);
+      clearTimeout(hideDelayTimerId[elementIndex]);
 
-      showDelayTimeId = setTimeout(function() {
+      showDelayTimerId[elementIndex] = setTimeout(function() {
         if(element.getAttribute("data-template") && !element.querySelector(".awesome-tooltip")) {
           fetchData(element);
         }
@@ -31,11 +32,12 @@
   function handleMouseLeave(element) {
     element.addEventListener("mouseleave", function(e){
       var element = e.currentTarget;
+      var elementIndex = element.getAttribute("data-index");
       var tooltip = element.querySelector("." + element.className.split(" ").join(".") + " .awesome-tooltip");
 
-      clearTimeout(showDelayTimeId);
+      clearTimeout(showDelayTimerId[elementIndex]);
 
-      hideDelayTimeId = setTimeout(function() {
+      hideDelayTimerId[elementIndex] = setTimeout(function() {
         if(tooltip) {
           tooltip.remove();
         }
@@ -51,21 +53,24 @@
     var tHeight = tooltip.offsetHeight;
     var tWidth  = tooltip.offsetWidth;
     var eWidth  = element.offsetWidth;
+    var bodyWidth = D.body.offsetWidth;
 
     var leftEnoughSpace   = tWidth / 2 + eWidth / 2 < elementRects.left;
-    var rightEnoughSpace  = tWidth / 2  < D.body.offsetWidth - elementRects.right;
+    var rightEnoughSpace  = tWidth / 2  < bodyWidth - elementRects.right;
     var bottomEnoughSpace = tHeight < W.outerHeight - elementRects.bottom;
     var topEnoughSpace    = tHeight + tooltipTriangle.offsetHeight < elementRects.top;
 
+    var location = element.getAttribute("data-location") ? "at-" + element.getAttribute("data-location") : "at-" + config.location;
+
     if(leftEnoughSpace && rightEnoughSpace && topEnoughSpace && bottomEnoughSpace) {
       tooltip.style.cssText = "left: " + ((elementRects.width / 2) - (tooltip.getClientRects()[0].width / 2)) + "px;";
       tooltipTriangle.style.cssText = "left: calc(50% - " + (tooltipTriangle.offsetWidth / 2) + "px);";
       return;
     }
 
-    switch(element.getAttribute("data-location") || config.location) {
-    case "top":
-    case "bottom":
+    switch(location) {
+    case "at-top":
+    case "at-bottom":
       if(!topEnoughSpace && leftEnoughSpace && rightEnoughSpace) {
         display(element, tooltipTriangle, "bottom");
         break;
@@ -87,8 +92,8 @@
           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;";
+          tooltip.style.cssText = "right: -" + (bodyWidth - elementRects.right) + "px;";
+          tooltipTriangle.style.cssText = "right: " + (bodyWidth - elementRects.right + tooltipTriangle.offsetWidth + tooltipTriangle.offsetWidth / 2) + "px;";
         }
       }
     }
@@ -103,13 +108,13 @@
   }
 
   function toggleLocation(element, location) {
-    element.className = element.className.replace(/top|bottom|left|right/gi, "").trim();
-    element.className += " " + location;
+    element.className = element.className.replace(/at-top|at-bottom|at-left|at-right/gi, "").trim();
+    element.className += " " + "at-" + location;
     element.className.trim();
   }
 
   function tooltipTemplate(element, text) {
-    var elementLocation = element.getAttribute("data-location") || config.location;
+    var elementLocation = element.getAttribute("data-location") ? "at-" + element.getAttribute("data-location") : "at-" + config.location;
 
     element.insertAdjacentHTML("beforeend",
       "<div class=\"awesome-tooltip " + elementLocation + "\">" +
@@ -139,8 +144,9 @@
   D.addEventListener(loadType, function() {
     var tooltips = D.querySelectorAll(".awesome_tooltip");
 
-    tooltips.forEach(function(element) {
+    tooltips.forEach(function(element, index) {
       element.className += element.className.length < 1 ? "awesome-tooltip-wrapper" : " awesome-tooltip-wrapper";
+      element.setAttribute("data-index", "awesome-tooltip" + index);
 
       handleMouseEnter(element);
       handleMouseLeave(element);

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

@@ -1,17 +1,17 @@
 .awesome-tooltip-wrapper {
   position: relative;
-  display: inline-block;
   cursor: pointer;
 
   .awesome-tooltip {
     position: absolute;
     background-color: #fff;
+    cursor: auto;
 
     &.hidden {
       display: none;
     }
 
-    &.top {
+    &.at-top {
       bottom: calc(100% + 10px);
 
       .content-wrapper .triangle {
@@ -22,7 +22,7 @@
       }
     }
 
-    &.bottom {
+    &.at-bottom {
       top: calc(100% + 10px);
 
       .content-wrapper .triangle {
@@ -33,7 +33,7 @@
       }
     }
 
-    &.left {
+    &.at-left {
       right: calc(100% + 10px);
 
       .content-wrapper .triangle {
@@ -44,7 +44,7 @@
       }
     }
 
-    &.right {
+    &.at-right {
       left: calc(100% + 10px);
 
       .content-wrapper .triangle {

data/app/controllers/awesome_tooltip/tooltips_controller.rb

@@ -1,4 +1,6 @@
 class AwesomeTooltip::TooltipsController < ApplicationController
+  include Rails.application.routes.url_helpers
+
   prepend_view_path(Rails.root.join('app', 'awesome_tooltips'))
 
   def show

data/lib/awesome_tooltip/version.rb

@@ -1,3 +1,3 @@
 module AwesomeTooltip
-  VERSION = '0.1.14'
+  VERSION = '0.1.15'.freeze
 end

metadata

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