Bootstrap-Tooltips auf Glyphicons

Question

Ich versuche, Tooltips anzuzeigen, wenn ein Benutzer über ein Glyphicons schwebt, das angezeigt wird, wenn ein Benutzer eine Eingabe nicht korrekt eingibt. Aber egal, was ich versuche, sie weigern sich zu zeigen (der Tooltip, alles andere funktioniert gut).

HTML:

<div class='form-group'> 
    <label class="control-label col-lg-3" for="id_move_name">Name</label> 
    <div class="col-lg-9 has-feedback"> 
    <input class='form-control no-whitespace not-empty' id='id_move_name' placeholder='MagicBlast' type='text'> 
    <span class="glyphicon form-control-feedback" data-placement="left" data-toggle="tooltip"></span> 
    </div> 
</div> 

Javascript (jQuery):

$(document).ready(function() { 
    $(".no-whitespace").focusout(function() { 
    if ($(this).val().indexOf(" ") > -1) { 
     $(this).parent().addClass("has-error"); 
     $(this).next("span").addClass("glyphicon-remove"); 
     $(this).next("span").attr("title", "Cannot be empty!"); 
    } 
    }); 

    $(".not-empty").focusout(function() { 
    if ($(this).val() == "") { 
     $(this).parent().addClass("has-error"); 
     $(this).next("span").addClass("glyphicon-remove"); 
     $(this).next("span").attr("title", "Cannot be empty!"); 
    } 
    }); 

    $(".not-empty, .no-whitespace").focusout(function() { 
    if ($(this).val() == "") return; 
    if ($(this).val().indexOf(" ") > -1) return; 
    $(this).parent().removeClass("has-error"); 
    $(this).next("span").removeClass("glyphicon-remove"); 
    $(this).next("span").removeAttr("title"); 
    }); 

    $('[data-toggle="tooltip"]').tooltip(); 
}); 

Ich weiß Tooltips Arbeit zu tun. Ich habe andere Tooltips auf meiner Seite, die mit den $('[data-toggle="tooltip"]').tooltip(); in <a> Elemente zeigen. Ich weiß auch, dass der Titel injiziert wird, weil es das in der Quelle der Seite sagt.

Ich habe auch ein Beispiel in Bootply eingerichtet. Das Glyphicon ist ausgeschaltet, aber es sieht mit meinem derzeitigen Code anderswo gut aus. Jede Hilfe wäre großartig!

http://www.bootply.com/PP7kvZLEJi

Answer 1

Ich bin auf meinem Handy, so kann ich nicht wirklich zeigen, was los ist.

Wenn Sie Bootstrap Framework installieren Sie anpassen können, welche Funktionen werden in den vorge hinzugefügt kompilierten Code, für Glyphe Symbole usw.

, dass etwas damit zu tun haben könnte, Bootstrap könnten Sie haben diejenigen, gesperrt, so können Fügen Sie ein wichtiges Tag hinzu.

Ich hatte Probleme mit Glyphen an einem Punkt, was ich tun musste, war das Glyph Icon URL finden und in den Kopf richtig hinzufügen.

Ich denke, es war von Google.

Answer 2

Html-Datei:

<br> 
    <div class="form-group col-lg-6 col-lg-offset-3"> 
    <label class="control-label col-lg-3" for="id_move_name">Name</label> 
    <div class="input-group input-group-md "> 
     <input class="form-control no-whitespace not-empty" id="id_move_name" placeholder="MagicBlast" type="text" aria-describedby="sizing-addon3"> 
     <span class="input-group-addon glyphicon glyphicon-user" id="sizing-addon3" data-toggle="tooltip" data-original-title=""></span> 
    </div> 
    </div> 

JQuery:

$(document).ready(function() { 

    $(".no-whitespace").focusout(function() { 
    if ($(this).val().indexOf(" ") > -1) { 
     $(this).parent().addClass("has-error"); 
     $(this).next("i").addClass("glyphicon-remove"); 
     $(this).next("span").attr("data-original-title", "Cannot be empty!"); 
    } 
}); 

$(".not-empty").focusout(function() { 
    if ($(this).val() == "") { 
     $(this).parent().addClass("has-error"); 
     $(this).next("span").addClass("glyphicon-remove"); 
     $(this).next("span").attr("data-original-title", "Cannot be empty!"); 
    } 
}); 

$(".not-empty, .no-whitespace").focusout(function() { 
    if ($(this).val() == "") return; 
    if ($(this).val().indexOf(" ") > -1) return; 
    $(this).parent().removeClass("has-error"); 
    $(this).next("span").removeClass("glyphicon-remove"); 
    $(this).next("span").removeAttr("data-original-title"); 
    }); 

    $("span").tooltip({ 
    placement: "right" 
    }); 
    });