1

estoy tratando de poner un botón dentro de un popovers pero no me lo muestra el botón. Busque información y solo encontré que tengo que insertar el "data-html="true", pero no me funciona. ¿Alguien que me apoye en este asunto?. Comparto el siguiente código:

<span class="d-inline-block" tabindex="0"
      data-bs-toggle="popover" data-bs-title="<?php echo "$nombre"; ?>" data-bs-trigger="hover focus" data-bs-html="true"
      data-bs-content="<button type='button' class='btn btn-success'>Success</button>">
  <img src="../assets/img/1.png" alt="">
</span>

JavaScript:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

1 respuesta 1

1

Podrías hacer uso de la combinación de las opciones html y selector así:

  • Indicamos que html es true
  • Indicamos en content el selector al elemento que queremos que aparezca dentro del contenido del Popover

Luego nos queda modificar el javascript que inicializa los Popover para que realice la consideraciones mencionadas.

Ejemplo:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  // Creamos la configuración
  let config = {}
  // Si es HTML = true, usamos el valor de `data-bs-content` como un selector
  if (popoverTriggerEl.dataset.bsHtml === 'true') 
    config.content = document.querySelector(popoverTriggerEl.dataset.bsContent);
  // Pasamos la configuración al constructor
  return new bootstrap.Popover(popoverTriggerEl, config)
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-title="Titulo del popover" data-bs-trigger="hover focus" data-bs-html="true" data-bs-content="#contenido">
  Clic para abrir popover
</span>
<div hidden>
  <div id="contenido">
    <b>Clic en el botón</b>
    <button type='button' class='btn btn-success'>Success</button>
  </div>
</div>

10
  • Entiendo, no pensé que también se podría indicar el HTML en JavaScript voy a ver si tu enseñanza me funciona
    – ALAN
    Commented el 1 mar. 2023 a las 0:22
  • Ya probé y no me funciona, no muestra el popover :(
    – ALAN
    Commented el 1 mar. 2023 a las 0:44
  • Me arroja este error: Uncaught TypeError: bootstrap.Popover.prototype._mergeConfigObj is not a function
    – ALAN
    Commented el 1 mar. 2023 a las 0:54
  • Hola @ALAN, evidentemente no estamos usando la misma versión del JS. Actualice mi respuesta para hacerla compatible con cualquier versión.
    – Marcos
    Commented el 1 mar. 2023 a las 1:05
  • o ya veo, una disculpa apenas voy a prendiendo en esto, voy a probar de nuevo
    – ALAN
    Commented el 1 mar. 2023 a las 1:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.