0

When I try putting a tooltip on a glyphicon, it does not seem to work correctly. But when I put it outside the tile it works fine. I'm very confused and any help would be much appreciated!!

Here's the jsfiddle of what i am talking about: https://jsfiddle.net/noe3mdvx/

HTML:

<div class="col-sm-9" style="display:inline-block">
</div>
<div class="row">
    <div class="panel panel-default col-xs-2 lp-centerNav-panel" style="position: relative;" >
        <div class="tipText">
            <p>
                <span data-toggle="tooltip" title="Hooray!" class="glyphicon glyphicon-question-sign">
                </span>
            </p>
        </div>
        <div class="panel-body">
            <strong>Accounting</strong>
        </div>
     </div>
 </div>
</div>

Full HTML:

            <div class="row">
            <div class="panel panel-default col-xs-2 lp-centerNav-panel" data-ng-repeat="menuItem in lp.MenuItems" data-ng-click="lp.Redirect(menuItem);" style="position: relative;">
                <div class="tipText">
                    <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="Hooray!"></span>
                </div>
                <div class="panel-body">
                    <strong data-ng-bind="menuItem.LinkText"></strong>
                    <img data-ng-src="{{menuItem.ImageUrl}}" />
                </div>
            </div>
        </div>

JS:

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});
Kyle Ries
  • 11
  • 2
  • don't think your fiddle works - all it does is move the box up on hover – Pete Jan 17 '17 at 15:14
  • is the closing div in line#2 correct? that seems a bit off .. ? – DasSaffe Jan 17 '17 at 15:14
  • it works correct as i see, https://jsfiddle.net/panamaprophet/noe3mdvx/2/ (i fixed your jsfiddle example by including a jquery in it) – Panama Prophet Jan 17 '17 at 15:16
  • @Pete That is how it is supposed to be, but when you hover the glyphicon it doesnt show the tooltip correctly. – Kyle Ries Jan 17 '17 at 15:17
  • Ah right, wasn't sure if it was missing something as nothing happens when I hover the icon. Also you don't have the above js in the fiddle (wasn't sure if it was part of bootstrap) – Pete Jan 17 '17 at 15:18
  • @Pete Yeah i noticed that after i posted and i dont know why it didnt update with the JS. – Kyle Ries Jan 17 '17 at 15:20
  • @PanamaProphet Yes i see that, but when i try putting in my project, it doesnt seem to work still – Kyle Ries Jan 17 '17 at 15:23
  • so it looks like the error located in another place. it may causes because of overriding a css styles of a tooltip. could you provide a fully reproducible example? – Panama Prophet Jan 17 '17 at 15:27
  • @PanamaProphet Thats everything that is inside of that tile thing. Only other thing i could think of is angular is messing it up and not displaying the correct tooltip – Kyle Ries Jan 17 '17 at 15:38
  • maybe it happens because angular changes the element which you try to get tooltip for after your tooltip initialization code executed? If it's right, then you need to re-initialize a tooltips after changes took effect. – Panama Prophet Jan 17 '17 at 15:49
  • @PanamaProphet I updated the post with the whole code block at the bottom of the post – Kyle Ries Jan 17 '17 at 15:53
  • i'm right, you need to re-init your tooltips everytime after angular updates DOM. but it's better way to avoid of mixing angular with jquery and use something like this - https://angular-ui.github.io/bootstrap/ – Panama Prophet Jan 17 '17 at 15:58
  • @PanamaProphet Im kind of a noob when it comes to jQuery and stuff with the DOM. So im not entirely sure how to re-init the DOM after the angular updates. Any helpful tips?? – Kyle Ries Jan 17 '17 at 16:16
  • http://stackoverflow.com/questions/21332671/angularjs-watch-dom-change try it – Panama Prophet Jan 17 '17 at 16:26

1 Answers1

0

In your JSFiddle https://jsfiddle.net/noe3mdvx/ I found there is no js code is written and not select jQuery for your code

try to add js code

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

and select any jQuery version

May it helps you.

Jigarb1992
  • 828
  • 2
  • 18
  • 41