Add button tooltip and hover state

brave · May 23, 2019 · 09729d5 · 09729d5
1 parent 95e9eab
commit 09729d5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 48 deletions.
diff --git a/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json b/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json
@@ -414,7 +414,7 @@
     "description": "Description text for ad grants in grant details"
   },
   "twitterTipsHoverText": {
-    "message": "Tip",
+    "message": "Tip this tweet",
     "description": "Hover text for Twitter tips action"
   },
   "twitterTipsIconLabel": {

diff --git a/components/brave_rewards/resources/extension/brave_rewards/content_scripts/twitter.ts b/components/brave_rewards/resources/extension/brave_rewards/content_scripts/twitter.ts
@@ -39,9 +39,10 @@ const getTweetMetaData = (tweet: Element): RewardsTip.TweetMetaData | null => {
 const createBraveTipAction = (tweet: Element) => {
   // Create the tip action
   const braveTipAction = document.createElement('div')
-  braveTipAction.className = 'ProfileTweet-action action-brave-tip'
+  braveTipAction.className = 'ProfileTweet-action js-tooltip action-brave-tip'
   braveTipAction.style.display = 'inline-block'
   braveTipAction.style.minWidth = '80px'
+  braveTipAction.setAttribute('data-original-title', getMessage('twitterTipsHoverText'))
 
   // Create the tip button
   const braveTipButton = document.createElement('button')
@@ -73,7 +74,6 @@ const createBraveTipAction = (tweet: Element) => {
   braveTipIconContainer.style.lineHeight = '0'
   braveTipIconContainer.style.position = 'relative'
   braveTipIconContainer.style.verticalAlign = 'middle'
-  braveTipIconContainer.setAttribute('data-original-title', getMessage('twitterTipsHoverText'))
   braveTipButton.appendChild(braveTipIconContainer)
 
   // Create the tip icon
@@ -116,6 +116,11 @@ const createBraveTipAction = (tweet: Element) => {
   const shadowRoot = braveTipAction.attachShadow({ mode: 'open' })
   shadowRoot.appendChild(braveTipButton)
 
+  // Create style element for hover color
+  const style = document.createElement('style')
+  style.innerHTML = '.ProfileTweet-actionButton :hover { color: #FB542B }'
+  shadowRoot.appendChild(style)
+
   return braveTipAction
 }