¿Cómo hacer que aparezca / desaparezca el popover de Bootstrap al pasar el mouse en lugar de hacer clic?

Bootstrap proporciona soporte incorporado para hacer popovers . Un popover es un cuadro de contenido que aparece cuando un usuario activa un evento específico con un selector de elementos específico. Aquí, discutiremos los métodos para activar el popover usando «pasar el mouse» en lugar de «hacer clic».

Método 1: Aquí, especificaremos el activador de popover en ‘hover’ usando solo la inicialización de jQuery. Podemos agregar detalles del título, así como criterios de activación en la propia función popover() como parámetros.

Programa:

<!-- Using jQuery initialization only -->
<!DOCTYPE html>
<html>
<head>
    <!-- CDN's required -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class="container">
        <center>
            <h1 style="color:green;">GeeksforGeeks</h1>
            <b>
                Bootstrap popover appear/disappear 
                on hover instead of click
            </b>
            <br><br>
            <button class="btn btn-success" 
                    data-toggle="popover" 
                    data-content="Computer Science Portal for Geeks" 
                    data-placement="bottom">
              Hover here!
            </button>
        </center>
    </div>
    <script>
        $('[data-toggle="popover"]').popover({
            title: "GeeksforGeeks",
            trigger: "hover"
        });
    </script>
</body>
  
</html>

Producción:

Método 2: Aquí usaremos el atributo ‘disparador de datos’. También podemos lograr lo mismo colocando ‘título’ y ‘activador de datos’ como atributos sin especificarlos como parámetros en el método popover() .

Programa:

<!-- Using data-trigger attribute -->
<!DOCTYPE html>
<html>
<head>
      
    <!-- CDN's required -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class="container">
        <center>
            <h1 style="color:green;">GeeksforGeeks</h1>
            <b>
                Bootstrap popover appear/disappear 
                on hover instead of click
            </b>
            <br><br>
            <button class="btn btn-success"
                    title="GeeksforGeeks" 
                    data-toggle="popover" 
                    data-trigger="hover"
                    data-content="Computer Science Portal for Geeks"
                    data-placement="bottom">
              Hover here!</button>
        </center>
    </div>
    <script>
        $('[data-toggle="popover"]').popover();
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta