Tengo una ventana emergente orientada hacia el fondo que me gustaría ser un poco más indulgente que la ventana emergente predeterminada, que se desvanece tan pronto como el mouse abandona el gatillo.

$('#example').popover({
  html: true,
  trigger: 'hover',
  container: '#example',
  placement: 'bottom',
  content: function () {
      return '<div class="box">here is some content</div>';
  }
});

Tengo que permanecer abierto mientras el mouse esté sobre el activador o el contenido del popover, pero eso es difícil para el usuario, ya que tienen que pasar del mouse desde el elemento disparador a la flecha hasta el contenido sin dejar esas áreas Para interactuar con el popover. Dos soluciones en mente, ninguna está funcionando:

1) La opción de retraso debe hacer esto. añadiendodelay: {hide: 500} la llamada emergente deja abierta la ventana emergente después de que el mouse se va, pero volver a ingresar el elemento de activación o la ventana emergente antes de que desaparezca no le dice a bootstrap que mantenga abierta la ventana emergente, por lo que desaparece al final del tiempo de espera inicial.

2) amplíe el elemento que contiene la flecha para que el mouse que va del elemento desencadenante al fondo entre el elemento desencadenante y la ventana emergente funcione (el mouse nunca habría dejado el desencadenante / elemento). Los siguientes trabajos, excepto la flecha, se dibujan con bordes CSS superpuestos, por lo que el fondo no es transparente:http://jsfiddle.net/HAZS8/

.popover.bottom .arrow {
    left: 0%;
    padding-left:50%;
    padding-right:50%;
}

La solución consiste en interconectar los eventos de mouseover y mouseleave con jquery, o reemplazar la flecha de bordes superpuestos con una imagen. ¿Mejor arreglos?