twitter-bootstrap - not - tooltip html

Bootstrap 3 Tooltip sobre Glyphicon

Question

No estoy seguro de si esto es posible, estoy intentando invocar una información sobre herramientas sobre un glifón dentro de un grupo de entrada, mi código (que no funciona) es;

<div class="input-group">
<input type="text" class="form-control" name="security" id="security"><span class="input-group-addon"><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container: ''body'' title="" data-original-title="Security Code"></span></span>
</div>

Estoy usando Bootstrap 3, y la última versión de jQuery.

Answer 1

Puede obtener una información sobre herramientas simple sobre el glyphicon usando el atributo de título (que está en blanco en su ejemplo).

title="info"

Answer 2

Un novato de Bootstrap aquí ...

Para usar el complemento Tooltip con el ícono de glifo, he encontrado éxito en el ajuste de la etiqueta span del ícono de glifo con una etiqueta de ancla que no tiene href:

<a data-toggle="tooltip" class="tooltipLink" data-original-title="Tooltip text goes here">
  <span class="glyphicon glyphicon-info-sign"></span>
</a>

Además, asegúrese de inicializar la información sobre herramientas para los enlaces con información sobre herramientas:

$("a.tooltipLink").tooltip();

Probé esto con Bootstrap 3.03, jQuery 1.10.2 + Firefox 26, Chrome 32.0.1700 e IE 11.0.9600. Hasta ahora, no hay hipo.

Answer 3

Usando la respuesta de @MadJack, reescribí su código y lo probé en JSFiddle.

HTML:

<div class="input-group" style=''margin-top: 100px;''>
    <input type="text" class="form-control" name="security" id="security">
        <span class="input-group-addon">
            <a class=''my-tool-tip'' data-toggle="tooltip" data-placement="left" title="Tooltip here">
                <!-- The class CANNOT be tooltip... -->
                <i class=''glyphicon glyphicon-info-sign''></i>
            </a>
        </span>
    </input>
</div>

JS:

$("a.my-tool-tip").tooltip();

Espero que esto ayude,

JSFiddle .

-Andrés

Answer 4

<span class="glyphicon glyphicon-info-sign icon_info" title="info"></span>

Luego agregue el código javascript para inicializar la información sobre herramientas como se muestra a continuación:

$(".icon_info").tooltip();