adds tooltip for email address

css/responsive.css

@@ -193,6 +193,17 @@
 
   }
 
+  /* Mobile S 340px */
+  @media only screen and (max-width: 340px) {
+    .tooltip {
+      left: -50%;
+    }
+
+    .tooltip::after {
+      left: 50%;
+    }
+  }
+
   /* Mobile S 320px */
   @media only screen and (max-width: 320px) {
 

css/styles.css

@@ -435,6 +435,53 @@ div.androidNotification-text {
   padding-right: 2rem;
 }
 
+/* Tooltip */
+.tooltipParent {
+  position: relative;
+}
+
+.tooltipParent:hover > .tooltip {
+  opacity: 1;
+}
+
+.tooltip {
+  background: #fb542b;
+
+  position: absolute;
+  left: -70%;
+  bottom: 30px;
+  z-index: 999999;
+
+  display: block;
+  box-sizing: border-box;
+  width: 205%;
+  padding: 5px 10px;
+  border-radius: 5px;
+
+  text-align: left;
+  color: white;
+  line-height: 1.4;
+
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s ease-in-out;
+  box-shadow: -1px -1px 15px 0px rgba(0,0,0,0.2);
+}
+
+.tooltip::after {
+  content: "";
+
+  position: absolute;
+  bottom: -10px;
+  left: 60%;
+
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid #fb542b;
+}
+
 /* Brand logos */
 .quoteBox img {
   opacity: .68;

index.html

@@ -192,7 +192,7 @@ <h1 class="sectionTitle">I'm ready to boost my business</h1>
           class="basicButton myBtn" id="finalStartNow">Start now</button></a>
       <p>
         Or for more information about setting up, contact
-        <a href="mailto:AdSales@brave.com"><strong>adsales@brave.com</strong></a>
+        <a class="tooltipParent" href="mailto:AdSales@brave.com"><strong>adsales@brave.com</strong><span class="tooltip">Please only use this email address if you are interested in purchasing advertising with Brave. For support, please visit community.brave.com.</span></a>
       </p>
       <small class="notice"><strong>Note:</strong> The current minimum campaign spend requirement for Brave Ads is
         $2,500 per month.