Mi botón Bootstrap Popover:
<button type="button" class="btn btn-secondary" data-container="body" data-bs-toggle="popover" data-placement="left" data-content="CONTENT"> Popover Text </button>Quiero obtener este HTML en el contenido de datos para que se muestre cuando se haga clic en la ventana emergente:
<a href="@Url.Action("Edit", "RentalHistories", new { id = item.RentalHistoryId })"> EDIT </a>Desafortunadamente, las comillas en el HTML parecen romperlo. He intentado usar comillas simples, comillas dobles y el código de comillas de escape ".
Creo que esto es lo que estás buscando:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) }) <!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </head> <body> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="left" data-bs-content='<a href="@Url.Action("Edit", "RentalHistories", new { id = item.RentalHistoryId })"> EDIT </a>'> Popover Text </button> </body> </html>Parece que también es importante para qué versión de bootstrap está utilizando. Después de investigar un poco, algunas de las versiones anteriores de bootstrap no requerían que pusieras algo como 'data-bs-placement' sino 'data-placement'. Aquí estoy usando Bootstrap versión 5.0.
Bootstrap 5.0 DOCS también muestra que puede inicializar un popover para que aparezca visible usando (agregándolo a su archivo .js o agregando una etiqueta:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) })Otra cosa es que tenía razón al usar comillas simples para empezar porque las comillas dobles con comillas dobles anidadas pueden causar confusión cuando se ejecutan.
Referencias: