From 7a116966fa9295411e8d18da19871f7d26f9dff4 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Wed, 24 Jan 2018 16:16:14 -0500
Subject: [PATCH] Add tooltip to full-screen-btn on the snippet note detail

---
 browser/main/Detail/NoteDetailInfo.styl    |  2 +-
 browser/main/Detail/SnippetNoteDetail.js   |  1 +
 browser/main/Detail/SnippetNoteDetail.styl | 15 +++++++++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index 4b96bd58..bc3c9462 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -46,7 +46,7 @@ $info-margin-under-border = 30px
 .info-right
   z-index 101
   display inline-flex
-  margin-top 5px
+  margin-top 3px
 
 .undo-button
   width 34px
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 2c6da41c..af8c178e 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -634,6 +634,7 @@ class SnippetNoteDetail extends React.Component {
         <button styleName='control-fullScreenButton' title='Fullscreen'
           onMouseDown={(e) => this.handleFullScreenButton(e)}>
           <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+          <span styleName='tooltip'>Fullscreen</span>
         </button>
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index f370afc8..e924ce2b 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -69,6 +69,21 @@
   top 80px
   margin-bottom 10px
   topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 70px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
 
 body[data-theme="white"]
   .root