Trato de encontrar una solución, me gustaría actualizar solo una parte del contenido de datos de popover. Ejemplo de código:
<div class="popover-wrapper"> <i class="glyphicon glyphicon-question-sign hover_content" id="popover_help" data-toggle="popover" data-placement="right" data-content="<p>Some static text <span class='update-text'>Dynamic text to update</span> </p>" data-html="true"> </i> </div> <button class="update-popover" onClick="updatePopoverContent()">Click to update</button> <script> function updatePopoverContent() { $('.popover-wrapper .hover_content')???;//and something like attr('data-content .update-text', 'new text') } </script>para mostrar popover utilizo:
$(".hover_content").popover({ trigger: "manual", animation: false, delay: { "hide": 30 } }).on("mouseenter", function() { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function() { $(_this).popover('hide'); }); }).on("mouseleave", function() { var _this = this; if (!$(".popover:hover").length) { $(_this).popover("hide"); } });¿Es posible cambiar solo una parte del texto de 'contenido de datos'? ¿Quizás alguien pueda dar algún consejo? ¡Gracias de antemano!
Usando bootstrap-4, puede actualizar el atributo data-content .
NB: no puede actualizar el valor de .data usando .data("content", newValue) de jquery, ya que parece que el popper lee el atributo directamente cada vez en lugar de respetar la convención de datos.
$("#popover_help").attr("data-content", replacementHtml); Para actualizar solo la parte update-text , puede leer el HTML, analizarlo, usar jquery para cambiarlo y luego volver a escribirlo como HTML:
var html = $("#popover_help").data("content"); var parsed = $("<div/></div>").html(html); parsed.find("span").text("Updated text"); $("#popover_help").attr("data-content", parsed.html());Puede aplicar esto a un .class para actualizar todo si tiene más de uno, aquí hay un ejemplo.
$(function () { $('[data-toggle="popover"]').popover() }) function updatePopoverContent() { $(".hover_content").each(function() { var html = $(this).data("content"); var parsed = $("<div/></div>").html(html); parsed.find("span").html("<strong>Updated</strong> text"); $(this).attr("data-content", parsed.html()); // doesn't update if currently shown, so hide then show if desired $(this).popover("hide"); //$(this).popover("show"); }); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"> <br/> <div class="popover-wrapper"> <i class="glyphicon glyphicon-question-sign hover_content" id="popover_help" data-toggle="popover" data-placement="right" data-title="Example" data-content="<p>Some static text <span class='update-text'>Dynamic text to update</span> </p>" data-html="true"> click me </i> </div> <hr/> <button class="update-popover" onClick="updatePopoverContent()">Click to update</button>