Fixed up use of tooltip in exports (#80)

* Fix: fixed library endpoint

* Bumps: 0.0.6

* Docs: improved documentation

* Bumps: 0.0.9

* Feat: added webpack to build module

* Fix: fixed webpack config

* Docs: updated documentation to describe new usage

* Chore: fixed js lint

* Chore: fixed export of default function

* Merge branch 'master' of https://github.com/Aristotle-Metadata-Enterprises/aristotle-tooltip

# Conflicts:
#	src/tooltip.js
#	src/utils.js

* Fix: fixed webpack config

* fix: fixed up tooltip css

* Fixed <hr> margins

* Chore: removed unneeded webpack configuration

example.html

@@ -22,31 +22,6 @@ <h2>
 <h2>A failing link</h2>
 <p>This is a <a href="#" data-aristotle-concept-id="3fhdsfjh48">failing link</a>.</p>
 <hr>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p><p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p><p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-<p><em data-aristotle-concept-id="498427"> Activity based funding: Admitted acute hospital care DSS 2013-2014</em></p>
-
-
-
-
 <script src="dist/aristotletooltip.min.js"></script>
 <script>
     const options = {

package.json

@@ -1,14 +1,13 @@
 {
   "name": "@aristotle-metadata-enterprises/aristotle_tooltip",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Aristotle Tooltip: add Aristotle functionality to any website!",
-  "main": "dist/aristotle_tooltip.js",
+  "main": "dist/aristotletooltip.min.js",
   "scripts": {
     "test": "karma start karma.conf.js --single-run",
     "lint": "eslint --ext .js ./src/",
     "build:dev": "webpack --config webpack.dev.js --watch",
-    "build": "webpack --config webpack.prod.js",
-    "build:lib": "webpack --config webpack.module.js"
+    "build": "webpack --config webpack.prod.js"
   },
   "repository": {
     "type": "git",

src/tooltip.css

@@ -1,18 +1,25 @@
-.see-more-link {
+.tippy-tooltip .see-more-link {
     /* Push the see more link right */
     text-align: right;
 }
 
-.aristotle-logo {
+.tippy-tooltip .aristotle-logo {
     vertical-align: middle;
 }
 
-.external-link {
+.tippy-tooltip .external-link {
     display: inline-block;
     width: 1em;
     height: 1em;
 }
 
+.tippy-tooltip hr {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
 .tippy-tooltip {
    font-size: 2.0em;
    overflow-wrap: break-word;
@@ -21,7 +28,7 @@
 
 @media (min-device-width: 480px) {
     .tippy-tooltip {
-        font-size: 0.8rem;
+        font-size: 0.9em;
     }
 
 }

src/tooltip.js

@@ -28,7 +28,6 @@ function makeRequest(baseUrl, aristotleId) {
 
 function handleError(error) {
     let errorMsg = '';
-
     if (error.response) {
         //  The request was made and the server responded with a status code
         // that falls out of the range of 2xx
@@ -54,29 +53,24 @@ function createTippyElements(options) {
     // Select all elements that contain an aristotle id
     const elements = document.querySelectorAll('[data-aristotle-concept-id]');
 
-    const staticOptions = {
-        allowHTML: false, // For better security
-        content: 'Loading...',
-        duration: [275, 1250],
-        theme: 'light-border',
-        flipOnUpdate: true, // Because the tooltip changes sizes when the definition successfully loads
-        interactive: true, // Because content in tooltips are also "clickable".
-        onCreate: function(instance) {
-            // Keep track of state
-            instance._isFetching = false;
-            instance._hasSucceeded = null;
-        },
-    };
-
-
     // Create a Tippy object for each element that has an attached aristotle id:
     for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
         const aristotleId = element.dataset.aristotleConceptId;
-        const dynamicOptions = {
+        tippy(element, {
             theme: 'light-border',
             placement: options.placement,
             trigger: options.trigger,
+            allowHTML: false, // For better security
+            content: 'Loading...',
+            duration: [275, 1250],
+            flipOnUpdate: true, // Because the tooltip changes sizes when the definition successfully loads
+            interactive: true, // Because content in tooltips are also "clickable".
+            onCreate: function(instance) {
+                // Keep track of state
+                instance._isFetching = false;
+                instance._hasSucceeded = null;
+            },
             onShow: function(instance) {
                 if (instance._isFetching || instance._hasSucceeded) {
                     return;
@@ -109,8 +103,7 @@ function createTippyElements(options) {
                 instance._see_more = false;
                 setHTMLContent(instance);
             },
-        };
-        tippy(element, mergeObjects(staticOptions, dynamicOptions));
+        });
     }
 }
 

webpack.common.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
@@ -13,7 +13,8 @@ module.exports = {
         new BundleAnalyzerPlugin({
             analyzerMode: 'static',
             openAnalyzer: false
-        })
+        }),
+        new CleanWebpackPlugin(),
     ],
     module: {
         rules: [

webpack.prod.js

@@ -1,6 +1,8 @@
- const merge = require('webpack-merge');
- const common = require('./webpack.common.js');
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
 
- module.exports = merge(common, {
-   mode: 'production',
- });
+module.exports = merge(common, {
+    mode: 'production',
+    devtool: 'source-map',
+
+});