Bootstrap 3 Tooltip über Glyphicon

Nicht sicher, ob dies auch dann möglich ist, bin ich versucht zu rufen Sie einen tooltip, der über ein glyphicon innerhalb einer input-Gruppe, mein code (der nicht funktioniert) ist;

<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>

Ich bin mit Bootstrap 3 und die neueste version von jQuery.

InformationsquelleAutor der Frage user2449026 | 2013-10-30

  1. 65

    Können Sie sich einen einfachen tooltip, der über die glyphicon mit dem title-Attribut (die leere in deinem Beispiel).

    title="info"

    InformationsquelleAutor der Antwort Dennis

  2. 20

    @MadJack ' s Antwort, schrieb ich deinen code getestet und auf 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();

    Hoffe, das hilft,

    JSFiddle.

    -Andrew

    InformationsquelleAutor der Antwort Android334

  3. 4

    Einer Bootstrap-Neuling hier...

    Verwendung des Tooltip-plugin mit der glyph-Symbol, die ich gefunden habe, Erfolg die Verpackung der Glyphe-icon span-tag ein Anker-tag ohne href:

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

    Auch sicher sein, initialisieren Sie die tooltips für die links mit tooltips:

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

    Getestet habe ich diese mit Bootstrap 3.03, jQuery 1.10.2 + Firefox 26, Chrome 32.0.1700, und IE 11.0.9600. So weit, kein Schluckauf.

    InformationsquelleAutor der Antwort jackfrosch

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

    Dann fügen Sie javascript-code zu initialisieren tooltip wie folgt:

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

    InformationsquelleAutor der Antwort Web_Developer

Schreibe einen Kommentar