javascript - transparente - La ventana emergente de Bootstrap solo funciona con botones, no con anclajes ni vanos

ventana modal jquery ejemplo

Question

Incluyo tooltip.js y popover.js.

Cuando mi marca se ve así:

<button class="popover-dismiss" data-toggle="popover" title="sheen" 
data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;">
PDS
</button>

con JS

$(''.popover-dismiss'').popover({
  trigger: ''focus'',
  html: ''true''
})

Entonces todo funciona bien. Sin embargo, cuando cambio mi button a una a , se rompe. No hay errores en la consola. Simplemente no da el popup.

<a href="javascript://" class="popover-dismiss" data-toggle="popover" title="sheen" 
data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;">
PDS
</a>

Los mismos atributos exactos. Sólo un ancla en lugar de un botón. También he intentado usar un tramo y eso tampoco parece funcionar.

Answer 1

Bueno, supongo que si quieres usar el "enfoque" como disparador, tu elemento debe ser enfocable. La configuración de tabindex hace que el elemento sea enfocable, por eso el "enfoque" del disparador comienza a funcionar cuando se establece tabindex.

Considere usar un índice de tabulación de -1 si no espera que los usuarios realmente se detengan en el elemento presionando la tecla de tabulación.

Eso es todo al respecto. Disparador: el foco se puede utilizar en la inicialización de JS.

Answer 2

Intente configurar el container: ''body'' opción container: ''body'' para la llamada popover() .

Answer 3

No hay necesidad de una solución o nada. Funciona bien si configura la información a través de JS, aquí hay un ejemplo:

HTML:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" title="Dismissible popover" data-content="And here''s some amazing content. It''s very engaging. Right?">Dismissible popover</a>

JS:

$(function() {
    $(document).popover({
        selector: ''[data-toggle=popover]'',
        trigger: ''focus''
    });
});

JSFiddle: https://jsfiddle.net/s02ykLo2/

Answer 4

Ok, así que resulta que hay un error en Twitter Bootstrap. Se ha abierto y cerrado un par de veces.

Actualmente hay un trabajo alrededor de:

1) No utilice el trigger: focus al inicializar popovers bootstrap
2) En su lugar, use data-trigger="focus" como un atributo para los elementos que activarán la ventana emergente
3) Los elementos que tienen una tabindex="-1" deberán tener tabindex="-1" declarado explícitamente.

Ejemplo de trabajo en http://jsfiddle.net/v5L7m/3/ navegadores aquí: http://jsfiddle.net/v5L7m/3/

También he confirmado esto en un caso de uso del mundo real.

Edición: @xanderiel señaló que tabindex=0 ahora parece causar un borde de enfoque nativo del navegador, que es lo que tabindex=0 mi respuesta original. Dicen que un tabindex de -1 elimina este borde.