From 5530cc53c62235d60d22d18b0a4f99a675621e36 Mon Sep 17 00:00:00 2001
From: Sean Li <mail@shang.li>
Date: Fri, 23 Jan 2015 17:19:08 -0800
Subject: [PATCH] Added tooltips.

---
 app/ContainerModal.react.js | 6 +++++-
 app/styles/main.less        | 3 +++
 app/styles/theme.less       | 5 +++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/ContainerModal.react.js b/app/ContainerModal.react.js
index e454baa9ea..c8778663d0 100644
--- a/app/ContainerModal.react.js
+++ b/app/ContainerModal.react.js
@@ -5,6 +5,8 @@ var Router = require('react-router');
 var Modal = require('react-bootstrap/Modal');
 var RetinaImage = require('react-retina-image');
 var ContainerStore = require('./ContainerStore');
+var OverlayTrigger = require('react-bootstrap/OverlayTrigger');
+var Popover = require('react-bootstrap/Popover');
 
 var Navigation = Router.Navigation;
 
@@ -109,7 +111,9 @@ var ContainerModal = React.createClass({
             <input type="search" ref="searchInput" className="form-control" placeholder="Find an existing image" onChange={this.handleChange}/>
             <div className="icon icon-magnifier search-icon"></div>
             <div className="question">
-              <a href="#"><span>What&#39;s an image?</span></a>
+              <OverlayTrigger trigger="hover" placement="bottom" overlay={<Popover>An image is a template which a container can be created from.</Popover>}>
+                <a><span>What&#39;s an image?</span></a>
+              </OverlayTrigger>
             </div>
             <div className="results">
               {title}
diff --git a/app/styles/main.less b/app/styles/main.less
index e8bcec4aa9..c1c9e3037a 100644
--- a/app/styles/main.less
+++ b/app/styles/main.less
@@ -77,9 +77,12 @@ html, body {
 
       .question {
         a {
+          transition: all 0.3s ease 0s;
+          cursor: default;
           color: @gray-lightest;
           &:hover {
             color: darken(@gray-lightest, 10%);
+            text-decoration: none;
           }
         }
         font-size: 10px;
diff --git a/app/styles/theme.less b/app/styles/theme.less
index 5093a8532c..012ae7c8db 100644
--- a/app/styles/theme.less
+++ b/app/styles/theme.less
@@ -12,6 +12,11 @@ h4 {
   font-weight: 400;
 }
 
+.popover-content {
+  color: @gray-normal;
+  font-size: 13px;
+}
+
 //
 // Buttons
 // --------------------------------------------------