Making the search tooltip more trustable adding an X button

to exit it.

Really the entire tooltip fullfils that purpose, but
the nature of internet has made people wary of everything
so they wouldn't click the tooltip to dismiss it.

public/css/styles.css

@@ -80,6 +80,12 @@ div.tooltip-search-promo {
   bottom: 115%;
   transform: translateX(-50%);
   opacity: 80%; }
+  div.tooltip-search-promo p.exit {
+    display: block;
+    position: absolute;
+    top: calc(0% - 5px);
+    left: calc(100% - 15px);
+    transform: translatex(-50%); }
 
 div.open-browser-container {
   display: flex;

public/css/styles.scss

@@ -107,6 +107,13 @@ div.tooltip-search-promo {
   bottom: 115%;
   transform: translateX(-50%);
   opacity: 80%;
+  p.exit {
+    display: block;
+    position: absolute;
+    top: calc(0% - 5px);
+    left: calc(100% - 15px);
+    transform: translatex(-50%);
+  }
 }
 
 div.open-browser-container {

templates/page/_search_bar.html.ep

@@ -6,6 +6,7 @@
     <div class="fake-text-box">
         <input type="text" value="<%=$search_term%>"></input>
         <div class="tooltip-search-promo">
+            <p class="exit">x</p>
             <p>Puedes buscar cualquier producto que quieras comprar en internet aquí.</p>
         </div>
     </div>