Establecí algunos atributos en mi botón con algunos elementos de arranque, sin embargo, cuando hice clic en el botón por primera vez, no funcionó. Necesito hacer clic en algún lugar fuera del botón y volver a hacer clic en el botón.
Resolví esto llamando a la función en onload y llamándola nuevamente en el botón, pero ahora estoy en una situación en la que ya no puedo hacer eso, así que me preguntaba si hay otras formas de resolver el problema.
Aquí está mi código: https://jsfiddle.net/a22177861/x381z0h6/6/
HTML:
<button type="button" class="btn btn-warning" onclick="PopOver(this,'Hi','Thank','You');">ClickMe！</button>JS:
function PopOver(myObj, mgr, Adate, Vdate) { $(function () { myObj.setAttribute("data-container", "body"); myObj.setAttribute("data-toggle", "popover"); myObj.setAttribute("data-placement", "bottom"); myObj.setAttribute("data-html", "true"); myObj.setAttribute("data-trigger", "focus"); myObj.setAttribute("title", "otherInfo"); myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate); $("[data-toggle='popover']").popover(); }); }¡Cualquier ayuda sería muy apreciada!
Este $('[data-toggle="popover"]').popover() en su código inicializa el popover, por lo que debe hacer clic dos veces para activarlo.
De acuerdo con la documentación emergente de Bootstrap:
Revela el popover de un elemento. Vuelve a la persona que llama antes de que se haya mostrado realmente el popover (es decir, antes de que ocurra el eventoshowed.bs.popover). Esto se considera una activación "manual" del popover. Los popovers cuyo título y contenido tienen una longitud cero nunca se muestran.
Puede usar .popover('show') para activar manualmente el popover.
Será así:
function PopOver(myObj, mgr, Adate, Vdate) { myObj.setAttribute("data-container", "body"); myObj.setAttribute("data-toggle", "popover"); myObj.setAttribute("data-placement", "bottom"); myObj.setAttribute("data-html", "true"); myObj.setAttribute("data-trigger", "focus"); myObj.setAttribute("title", "otherInfo"); myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate); $("[data-toggle='popover']").popover('show'); }Le sugiero que escriba su código de una manera más amigable. Algunos campos muertos se pueden escribir directamente en HTML
<button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-html="true" title='otherInfo' onclick="PopOver(this,'Hi','Thank','You');">ClickMe！</button> function PopOver(myObj, mgr, Adate, Vdate) { myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate); $("[data-toggle='popover']").popover('show'); }