Bootstrap tooltips on glyphicons

Question

I'm trying to show tooltips whenever a user hovers over a glyphicons that appears when a user doesn't type an input correctly. However no matter what I try they refuse to show (the tooltip, everything else works fine).

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

I know tooltips do work. I have other tooltips on my page that show with the $('[data-toggle="tooltip"]').tooltip(); in <a> elements. I also know that the title is being injected because it does say so in the source of the page.

I've also set up an example in bootply. The glyphicon is off in it but it does look fine with my current code elsewhere. Any help on this would be great!

http://www.bootply.com/PP7kvZLEJi

Answer 1

I'm on my phone, so I can't really show you whats going on.

If you are installing bootstrap framework you can customize what features are added into the pre compiled code, for glyph icons and etc.

That could have something to do with it, bootstrap might have those disabled so you can add an !important tag.

I had issues with glyphs at one point, what I had to do was find the glyph icon url and add in into the head properly.

I think it was from google.

Answer 2

Html file:

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