From b17a041eb0b2c896c46f3d98046850bb38a87dfa Mon Sep 17 00:00:00 2001
From: Carlos Toledo <carlombo@hotmail.com>
Date: Tue, 12 Mar 2024 13:25:19 -0300
Subject: [PATCH] =?UTF-8?q?Se=20elimina=20el=20tooltip=20del=20bot=C3=B3n?=
 =?UTF-8?q?=20enviar=20y=20se=20agrega=20Popover=20y=20sus=20configuracion?=
 =?UTF-8?q?es=20para=20operar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/script.js | 19 +++++++++++++++++++
 index.html          |  6 +++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index 99408e2..f357a1b 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -2,6 +2,10 @@
 const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
 const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
 
+// Popover
+const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
+
 //Scroll Reveal
 window.sr = ScrollReveal();
 sr.reveal('#quienes-somos', {
@@ -25,4 +29,19 @@ window.addEventListener('scroll', function() {
   } else {
     navbar.classList.remove('navbar-color-change');
   }
+});
+
+// Para prevenir que la página suba al presionar el botón
+document.querySelector('.btn[data-bs-toggle="popover"]').addEventListener('click', function(e) {
+  e.preventDefault();
+});
+
+// Para oculpar popover luego de un tiempo
+$(document).ready(function(){
+  $('[data-bs-toggle="popover"]').popover().on('shown.bs.popover', function(){
+    var _this = this;
+    setTimeout(function(){
+      $(_this).popover('hide');
+    }, 1600);
+  });
 });
\ No newline at end of file
diff --git a/index.html b/index.html
index 3c36646..1105011 100644
--- a/index.html
+++ b/index.html
@@ -168,9 +168,9 @@ <h2 class="text-center mt-4">CONTACTO</h2>
                 <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
               </div>
               <div class="d-flex justify-content-right">
-                <button type="submit" class="btn btn-light px-4 mb-3" data-bs-toggle="tooltip" data-bs-placement="top"
-                data-bs-custom-class="custom-tooltip"
-                data-bs-title="Presiona para enviar a tu mensaje">Enviar</button>
+                <button type="submit" class="btn btn-light px-4 mb-3" 
+                data-bs-toggle="popover" 
+                data-bs-content="Mensaje enviado exitosamente">Enviar</button>
               </div>
             </form>
           </div>