Adds tooltips in particular elements.

app/styles/general.scss

@@ -20,3 +20,36 @@ section {
 .cap {
   text-transform: capitalize;
 }
+
+.inline-block {
+  display: inline-block;
+}
+
+.tooltipster-sidetip.tooltipster-borderless {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: 12px;
+
+  .tooltipster-box {
+    background-color: $primary-color;
+
+    .tooltipster-content {
+      line-height: 14px;
+      padding: 4px 10px;
+    }
+  }
+
+  &.tooltipster-top {
+    .tooltipster-arrow-border {
+      border-top-color: $primary-color;
+    }
+  }
+
+  &.tooltipster-right {
+    .tooltipster-arrow {
+      margin-top: -13px;
+    }
+    .tooltipster-arrow-border {
+      border-right-color: $primary-color;
+    }
+  }
+}

app/styles/participant-avatars.scss

@@ -1,25 +1,31 @@
 .participants {
-  img {
-    width: 80px;
-    height: 80px;
-    object-fit: cover;
+  display: flex;
+  flex-wrap: wrap;
+
+  > div {
+    display: inline-block;
     margin: 0 10px 10px 0px;
-    border: 3px solid rgba(255,255,255,.1);
-    filter: grayscale(100%);
-    transition: all .2s;
 
-    &:hover {
-      filter: grayscale(0%);
-      border: 3px solid $primary-color-light;
-      transition: all .4s;
+    img {
+      width: 80px;
+      height: 80px;
+      object-fit: cover;
+      border: 3px solid rgba(255,255,255,.1);
+      filter: grayscale(100%);
+      transition: all .2s;
+
+      &:hover {
+        filter: grayscale(0%);
+        border: 3px solid $primary-color-light;
+        transition: all .4s;
+      }
     }
   }
 
   .new-rsvp {
     background-color: $primary-color;
     width: 80px;
     height: 80px;
-    margin: 0 10px 10px 0px;
     text-align: center;
     display: inline-block;
     vertical-align: middle;

app/templates/components/participant-avatars.hbs

@@ -2,9 +2,14 @@
   <p>Obteniendo participantes del próximo meetup...</p>
 {{else}}
   {{#each participants as |participant|}}
-    <img src="{{participant.imageUrl}}"
-      alt="{{participant.name}}"
-      title="{{participant.name}}">
+    {{#tool-tipster
+      title=participant.name
+      theme="tooltipster-borderless"
+      animation="grow"
+      side="top"
+    }}
+      <img src="{{participant.imageUrl}}" alt="{{participant.name}}">
+    {{/tool-tipster}}
   {{/each}}
   <div class="new-rsvp">
     <a href="http://meetup.com/ember-montevideo/">

app/templates/components/sidebar-logo.hbs

@@ -1,4 +1,8 @@
-<img src="assets/images/tomster.jpg" alt="Tomster Uruguay" title="Ember Montevideo" class="img-responsive sidebar-menu-logo--image" onclick={{action (toggle this "easterEgg")}} />
+<img src="assets/images/tomster.jpg"
+  alt="Tomster Uruguay"
+  class="img-responsive sidebar-menu-logo--image"
+  onclick={{action (toggle this "easterEgg")}} />
+
 <h1 class="sidebar-menu-logo--title">MONTEVIDEO</h1>
 
 {{#if easterEgg }}

app/templates/components/site-footer.hbs

@@ -20,24 +20,56 @@
 
     <ul class="social-links">
       <li>
-        <a href="http://meetup.com/ember-montevideo/">
-          <i class="fa fa-meetup" aria-hidden="true"></i>
-        </a>
+        {{#tool-tipster
+          delay=500
+          title="Sitio del meetup"
+          theme="tooltipster-borderless"
+          animation="grow"
+          side="top"
+        }}
+          <a href="http://meetup.com/ember-montevideo/">
+            <i class="fa fa-meetup" aria-hidden="true"></i>
+          </a>
+        {{/tool-tipster}}
       </li>
       <li>
-        <a href="https://owu.slack.com/messages/C45ERN1JA/">
-          <i class="fa fa-slack" aria-hidden="true"></i>
-        </a>
+        {{#tool-tipster
+          delay=500
+          title="Canales de slack"
+          theme="tooltipster-borderless"
+          animation="grow"
+          side="top"
+        }}
+          <a href="https://owu.slack.com/messages/C45ERN1JA/">
+            <i class="fa fa-slack" aria-hidden="true"></i>
+          </a>
+        {{/tool-tipster}}
       </li>
       <li>
-        <a href="https://github.com/ember-montevideo">
-          <i class="fa fa-github" aria-hidden="true"></i>
-        </a>
+        {{#tool-tipster
+          delay=500
+          title="Repositorio de github"
+          theme="tooltipster-borderless"
+          animation="grow"
+          side="top"
+        }}
+          <a href="https://github.com/ember-montevideo">
+            <i class="fa fa-github" aria-hidden="true"></i>
+          </a>
+        {{/tool-tipster}}
       </li>
       <li>
-        <a href="http://twitter.com/embermontevideo/">
-          <i class="fa fa-twitter" aria-hidden="true"></i>
-        </a>
+        {{#tool-tipster
+          delay=500
+          title="Síguenos en twitter"
+          theme="tooltipster-borderless"
+          animation="grow"
+          side="top"
+        }}
+          <a href="http://twitter.com/embermontevideo/">
+            <i class="fa fa-twitter" aria-hidden="true"></i>
+          </a>
+        {{/tool-tipster}}
       </li>
     </ul>
   </div>

ember-cli-build.js

@@ -6,6 +6,10 @@ module.exports = function(defaults) {
     // Add options here
     SRI: {
       enabled: false
+    },
+
+    'ember-cli-tooltipster': {
+      importTooltipsterBorderless: true
     }
   });
 

package.json

@@ -36,6 +36,7 @@
     "ember-cli-sass": "6.1.1",
     "ember-cli-shims": "^1.1.0",
     "ember-cli-sri": "^2.1.0",
+    "ember-cli-tooltipster": "^0.8.1",
     "ember-cli-uglify": "^1.2.0",
     "ember-concurrency": "0.8.1",
     "ember-confetti": "1.0.3",
@@ -55,7 +56,8 @@
     "ember-web-app-rename": "1.0.0",
     "ember-welcome-page": "^3.0.0",
     "ember-wormhole": "0.5.1",
-    "loader.js": "^4.2.3"
+    "loader.js": "^4.2.3",
+    "tooltipster": "4.2.5"
   },
   "engines": {
     "node": ">= 4"