javascript - Bootstrap tooltip - tooltip function not found -
i'm trying use tooltips in bootstrap when user mouseovers link, text appears. can see how should here: http://getbootstrap.com/javascript/#tooltips
instead, nothing happens when mouseover links. here's html:
<div class="form-group"> <label for="test" class="quoteform"><a href="#" data-toggle="tooltip" class="tip-left toollink" data-original-title="this text should appear in tooltip."><i class="fa fa-question-circle"></i></a>test<span aria-required="true" class="required">* <span></span></span></label> <select class="form-control quotedetails" id="test"> <option value="" selected="" disabled="">please select</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div>
here's js i'm running in header:
<script type="text/javascript"> $(document).ready(function(){ $(".tip-top").tooltip({ placement : 'top' }); $(".tip-right").tooltip({ placement : 'right' }); $(".tip-bottom").tooltip({ placement : 'bottom' }); $(".tip-left").tooltip({ placement : 'left' }); });
when run page, error: typeerror: $(...).tooltip not function. thought might because had incorrectly linked jquery , bootstrap.min.js, can navigate both of them , fine. additionally, tried replacing both of them links respective cdn's made no difference.
here js files i'm linking to:
<!-- scripts --> <script src="/js/plugins/jquery.1.11.0.js"></script> <script src="/js/plugins/bootstrap.min.js"></script> <script src="/js/plugins/bootstrap-dialog.min.js"></script> <script src="/js/owl.carousel.js"></script> <script src="/js/custom.js"></script> <script src="/js/validate.js"></script> <script src="/js/plugins/sticky-tabs.min.js"></script> <script src="/js/plugins/jquery.select2list.min.js"></script>
add js tooltip
https://jsfiddle.net/skaadel/ewscg13g/
tooltip js
$(function () { $('[data-toggle="tooltip"]').tooltip() })
Comments
Post a Comment