关于glyphicons的Bootstrap工具提示

Question

我试图在用户将鼠标悬停在用户未正确键入输入时出现的字形上时显示工具提示。然而，无论我尝试什么，他们拒绝显示（工具提示，其他一切正常）。

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(); 
});

我知道工具提示确实有效。我的页面上有其他工具提示，显示$('[data-toggle="tooltip"]').tooltip();元素中的<a>。我也知道标题正在被注入，因为它确实在页面的来源中这么说。

我还在bootply中设置了一个示例。 glyphicon是关闭的，但它在我的当前代码其他地方看起来确实很好。对此的任何帮助都会很棒！

http://www.bootply.com/PP7kvZLEJi

Answer 1

我在打电话，所以我无法向你展示最新情况。

如果要安装bootstrap框架，您可以自定义预编译代码中添加的功能，字形图标等。

这可能与它有关，bootstrap可能会禁用这些，所以你可以添加一个！important标签。

我一度遇到字形问题，我必须做的是找到字形图标网址并正确添加到头部。

我认为这是来自谷歌。

Answer 2

Html文件：

<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"
   }); 
  });