Unable to show tooltip in list item with bootstrap 3

Question

After searching alot i haven't found the solution to display tooltip using jquery in bootstrap 3.

I have a list of icons, on them i want to display tooltip with different titles.

<div id="footer">
  <div class="container drawerbg">
    <ul class="list-inline col-lg-3 col-md-3 col-sm-6 col-xs-6 col-lg-offset-5 col-md-offset-5 col-sm-offset-5">
      <li><a class="social" href="#" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left"><img src="img/facebook.jpg" alt="facebook icon"></a></li>
      <li><a href="#"><img src="img/twitter.jpg" alt="twitter icon"></a></li>
      <li><a href="#"><img src="img/tumblr.jpg" alt="tumblr icon"></a></li>
      <li><a href="#"><img src="img/flickr.jpg" alt="flickr icon"></a></li>
      <li><a href="#"><img src="img/youtube.jpg" alt="youtube icon"></a></li>
    </ul>
  </div>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<script>
    $(document).ready(function(e) {
    $("#mc-embedded-subscribe-form").validate();
    $.extend($.validator.messages, { required: "Please enter a valid email address." });
    $('li').tooltip();
    });
</script>

code on jsfiddle is not working but still here is the link

score 0 · Accepted Answer · answered Nov 06 '13 at 12:46

you can use the following jquery code to show bootstrap popover, pls see the working fiddle here

        $(function () {
            var showPopover = function () {
                $(this).popover('show');
            }
            , hidePopover = function () {
                $(this).popover('hide');
            };

            $('#fb').popover({
                content: 'Facebook',
                trigger: 'hover',
                placement:'top'
            })
        $('#tw').popover({
                content: 'Twitter',
                trigger: 'hover',
                placement:'top'
            }) 
        $('#tb').popover({
                content: 'tumblr',
                trigger: 'hover',
                placement:'top'
            })  
        $('#fl').popover({
                content: 'flickr',
                trigger: 'hover',
                placement:'top'
            })  
        $('#yt').popover({
                content: 'youtube',
                trigger: 'hover',
                placement:'top'
            })            
            .focus(showPopover)
            .blur(hidePopover)
            .hover(showPopover, hidePopover);
        });

Unable to show tooltip in list item with bootstrap 3

1 Answers1