diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 4ef6b806..804ceba8 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -263,13 +263,20 @@ class MarkdownNoteDetail extends React.Component {
/>
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index 0def79e6..b06a8ef7 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -77,11 +77,18 @@ $info-height = 75px
padding 0
&:active
border-color $ui-button--focus-borderColor
- &:hover .left-control-newPostButton-tooltip
- display block
+ &:hover .info-right-button-tooltip
+ opacity 1
&:focus
border-color $ui-button--focus-borderColor
+.info-right-button-tooltip
+ tooltip()
+ position fixed
+ top 45px
+ padding 5px
+ opacity 0
+
.body
absolute bottom left right
top $info-height
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index dc71a045..d925be9d 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -434,13 +434,20 @@ class SnippetNoteDetail extends React.Component {
/>
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index f64e0a9c..5963f34b 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -77,10 +77,16 @@ $info-height = 75px
padding 0
&:active
border-color $ui-button--focus-borderColor
- &:hover .left-control-newPostButton-tooltip
- display block
+ &:hover .info-right-button-tooltip
+ opacity 1
&:focus
border-color $ui-button--focus-borderColor
+.info-right-button-tooltip
+ tooltip()
+ position fixed
+ top 45px
+ padding 5px
+ opacity 0
.body
absolute bottom left right
diff --git a/browser/main/Detail/StarButton.js b/browser/main/Detail/StarButton.js
index e3f98a97..055a4fff 100644
--- a/browser/main/Detail/StarButton.js
+++ b/browser/main/Detail/StarButton.js
@@ -47,11 +47,13 @@ class StarButton extends React.Component {
onMouseLeave={(e) => this.handleMouseLeave(e)}
onClick={this.props.onClick}
>
-
+ Star Note
)
}
diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl
index add3a354..041fdf1d 100644
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -1,11 +1,25 @@
.root
position relative
padding 0
- transition transform 0.15s
&:hover
- transform rotate(-72deg)
+ .icon
+ transform rotate(-72deg)
+ .tooltip
+ opacity 1
+
.root--active
@extend .root
color $ui-active-color
- transform rotate(-72deg)
+ .icon
+ transform rotate(-72deg)
+.icon
+ transition transform 0.15s
+
+.tooltip
+ tooltip()
+ position fixed
+ top 45px
+ right 65px
+ padding 5px
+ opacity 0
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index ae6a18e9..f4665dce 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -88,19 +88,17 @@ $control-height = 34px
padding 0
&:active
border-color $ui-button--active-backgroundColor
- &:hover .left-control-newPostButton-tooltip
- display block
+ &:hover .control-newPostButton-tooltip
+ opacity 1
.control-newPostButton-tooltip
+ tooltip()
position fixed
- line-height 1.4
- background-color $ui-tooltip-backgroundColor
- color $ui-tooltip-text-color
- font-size 10px
- margin-left -25px
- margin-top 5px
- padding 5px
- z-index 1
- border-radius 5px
- display none
pointer-events none
+ top 45px
+ left 385px
+ z-index 10
+ padding 5px
+ line-height normal
+ opacity 0
+ transition 0.1s
diff --git a/browser/main/modals/PreferencesModal/StorageItem.js b/browser/main/modals/PreferencesModal/StorageItem.js
index 9744e6c9..374c9218 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.js
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -313,16 +313,25 @@ class StorageItem extends React.Component {
onClick={(e) => this.handleNewFolderButtonClick(e)}
>
+ Add Folder
diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl
index 48184101..0c8aaf55 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.styl
+++ b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -47,8 +47,21 @@
border-radius 2px
border $ui-border
margin-right 5px
+ position relative
&:last-child
margin-right 0
+ &:hover
+ .header-control-button-tooltip
+ opacity 1
+
+.header-control-button-tooltip
+ tooltip()
+ position absolute
+ opacity 0
+ padding 5px
+ top 25px
+ z-index 10
+ white-space nowrap
.folderList-item
height 35px
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 14d50946..30bf3d48 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -29,6 +29,15 @@ $ui-tooltip-text-color = white
$ui-tooltip-backgroundColor = alpha(#444, 70%)
$ui-tooltip-button-backgroundColor = #D1D1D1
$ui-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)
+$ui-tooltip-font-size = 12px
+
+tooltip()
+ background-color $ui-tooltip-backgroundColor = alpha(#444, 70%)
+ color $ui-tooltip-text-color = white
+ font-size $ui-tooltip-font-size
+ pointer-events none
+ transition 0.1s
+
// UI Input
$ui-input--focus-borderColor = #369DCD