Making tooltips conditional

FlorianFe · Jun 26, 2017 · f04ea1d · f04ea1d
1 parent 50ddaf6
commit f04ea1d
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 A Web Component for visualizing an chemical element built with Polymer 2
 
-## Preview 
+## Preview
 
 ![Screenshot](https://florianfe.github.io/screenshots/chemical-element-visualisation/screenshot-1.png)
 
@@ -14,7 +14,7 @@ A Web Component for visualizing an chemical element built with Polymer 2
 <custom-element-demo>
   <template>
     <link rel="import" href="chemical-element-visualisation.html">
-    <chemical-element-visualisation symbol="he"></chemical-element-visualisation>
+    <chemical-element-visualisation symbol="he" tooltip="true"></chemical-element-visualisation>
   </template>
 </custom-element-demo>
 ```

diff --git a/chemical-element-visualisation.html b/chemical-element-visualisation.html
@@ -56,9 +56,13 @@
       <g id="ring-group"></g>
       <g id="electron-group"></g>
     </svg>
-    <paper-tooltip for="element" position="bottom" animation-delay="0">
-      [[_element.name]]
-    </paper-tooltip>
+    <dom-if if="[[tooltip]]">
+      <template>
+        <paper-tooltip for="element" position="bottom" animation-delay="0">
+          [[_element.name]]
+        </paper-tooltip>
+      </template>
+    </dom-if>
   </template>
 
   <script src="chemical-element-visualisation.js"></script>

diff --git a/chemical-element-visualisation.js b/chemical-element-visualisation.js
@@ -10,6 +10,11 @@ class ChemicalElementVisualisation extends Polymer.Element
   {
     return {
       symbol: String,
+      tooltip:
+      {
+        type: Boolean,
+        value: false
+      },
       _elements:
       {
         type: Object,

diff --git a/demo/index.html b/demo/index.html
@@ -72,6 +72,49 @@ <h4>Magnesium</h4>
       </template>
     </demo-snippet>
 
+    <h3>Tooltips</h3>
+    <demo-snippet>
+      <template>
+        <style>
+
+          .container
+          {
+            display: flex;
+          }
+
+          .item
+          {
+            flex: 1;
+          }
+
+        </style>
+
+        <div class="container">
+          <div class="item">
+            <h4>Hydrogen</h4>
+            <chemical-element-visualisation
+              symbol="h"
+              tooltip="true"
+            ></chemical-element-visualisation>
+          </div>
+          <div class="item">
+            <h4>Helium</h4>
+            <chemical-element-visualisation
+              symbol="he"
+              tooltip="true"
+            ></chemical-element-visualisation>
+          </div>
+          <div class="item">
+            <h4>Magnesium</h4>
+            <chemical-element-visualisation
+              symbol="mg"
+              tooltip="true"
+            ></chemical-element-visualisation>
+          </div>
+        </div>
+      </template>
+    </demo-snippet>
+
     <h3>Change Element Type Colors</h3>
     <demo-snippet>
       <template>