Foro de elhacker.net

El problema es el siguiente:

Bootstrap v.3.0.3 trae consigo un plug-in llamado bootstrap-tooltip, que lo que hace es mostrar un pequeño globo para mostrar alguna información al pararse encima de algun componente, estoy tratando de mostrarlo encima de un botón.

Verán, tengo el siguiente código:

<form action='action.php' method='post'>
<div>
<button class='btn btn-danger btn-sm' type='submit' name='message_delete_submit' data-toggle='tooltip' data-placement='right' title='¿Eliminar? No se puede deshacer'>
<span class='glyphicon glyphicon-trash'></span>
</button>
</div>

Pero, el tooltip no se muestra con los efectos del plug-in.

Ahora, según la documentación de Bootstrap v.3.0.3 sobre el plug-in:



Ahora, mi pregunta ¿Como la inicializo?

Entonces, me encontré con una cosa en el código fuente de la documentación, en donde ponen la demostración de los ToolTips, incluyen los componentes dentro de:

<div class="tooltip-demo">
</div>

Entonces buscando, vi que ellos utilizan un archivo application.js, que según los comentarios que tiene, dice que no se debe utilizar este archivo, es solo para la documentación de ellos. Pero ahi encontré esto(entre otras cosas):

 // tooltip demo
    $('.tooltip-demo').tooltip({
      selector: "[data-toggle=tooltip]",
      container: "body"
    })
 
$('.tooltip-test').tooltip()

En resumen. Esto significa que lo están inicializando? Hay que inicializarlo desde un archivo .js o script? Como lo puedo hacer?

Aclaro, que incluyendo ese archivo (application.js) en mi página y utilizando la clase "tooltip-demo", si funciona. Pero quiero saber como inicializarlo.

Espero puedan ayudarme, traté de explicarme lo mejor posible, pero si tienen alguna duda sobre lo que pregunto me lo dicen.

Gracias de antemano.

Modifico:

Después de mucho rato probando cosas y buscando, di con la solución. Resulta que tengo que, como bien dice la documentación de Bootstrap, inicializarlo. Creo que ellos no lo activan por defecto para evitar el manejo de eventos del mouse en todos los elementos.

Pues la manera de inicializarlo que utilicé fue la siguiente.

<script type="text/javascript">
    $(function () {
        $('body').tooltip({
            selector: 'a[rel="tooltip"], [data-toggle="tooltip"]'
        });
    });
</script>

Donde utilizo como selector para que funcione el atributo [rel = tooltip] para las etiquetas a y el [data-toggle = tooltip] para otros componentes.

Salu2s