diff --git a/src/main/less/app.less b/src/main/less/app.less
index 5996ba1c..0daa2904 100644
--- a/src/main/less/app.less
+++ b/src/main/less/app.less
@@ -10,13 +10,12 @@
 }
 
 .site-tile-inner(@padding) {
-  position: relative;
-  height: 100%;
   padding: @padding;
 }
 
 .site-tile-inner-with-icon(@padding, @icon-size) {
   .site-tile-inner(@padding);
+  min-height: @icon-size;
   padding-left: @padding + @padding + @icon-size;
   background-repeat: no-repeat;
   background-position-x: @padding;
@@ -24,6 +23,17 @@
   // background-image should be given in HTML
 }
 
+.tip(@width) {
+  position: absolute;
+  z-index: 10;
+  max-width: @width;
+  border-radius: 3px;
+  margin-top: 5px;
+  padding: 5px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
 
 body {
   font-size: 10.5pt;
@@ -31,6 +41,11 @@ body {
   background-color: #e9eaed;
 }
 
+a {
+  color: #000;
+  text-decoration: none;
+}
+
 .container {
   margin-left: 2em;
   margin-right: 2em;
@@ -48,14 +63,10 @@ body {
 }
 
 .site {
+  background-color: #fff;
   border-color: #eee #ddd #ddd;
   border-radius: 3px;
 
-  >div {
-    background-color: #fff;
-    color: #000;
-  }
-
   &:hover {
     box-shadow: 0 0 10px #9ad;
   }
@@ -66,10 +77,21 @@ body {
   .folder {
     .site-tile(51px, 48px, 5px);
   }
+
   .site {
     .site-tile(48px, 48px, 5px);
-    >div {
+    .site-icon {
       .site-tile-inner-with-icon(16px, 16px);
+      .site-icon-text {
+        display: none;
+      }
+    }
+    .site-tip {
+      .tip(160px);
+      display: none;
+    }
+    &:hover .site-tip {
+      display: block;
     }
   }
 }
@@ -78,10 +100,14 @@ body {
   .folder {
     .site-tile(160px, 48px, 5px);
   }
+
   .site {
     .site-tile(160px, 48px, 5px);
-    >div {
+    .site-icon {
       .site-tile-inner-with-icon(5px, 16px);
     }
+    .site-tip {
+      display: none;
+    }
   }
 }
diff --git a/src/main/static/newtab.html b/src/main/static/newtab.html
index 3ed0c84c..1b2c24c4 100644
--- a/src/main/static/newtab.html
+++ b/src/main/static/newtab.html
@@ -30,13 +30,16 @@
   </script>
 
   <script type="text/ng-template" id="site.html">
-    <a href="{{item.url}}">
-      <div class="site">
-        <div style="background-image: url('chrome://favicon/{{item.url}}')">
-          {{item.title}}
+    <div class="site">
+      <a href="{{item.url}}">
+        <div class="site-icon" style="background-image: url('chrome://favicon/{{item.url}}')">
+          <div class="site-icon-text">{{item.title}}</div>
         </div>
+      </a>
+      <div class="site-tip">
+        <div class="site-tip-text">{{item.title}}</div>
       </div>
-    </a>
+    </div>
   </script>
 
 </body>