引导工具提示-没有找到工具提示功能
Bootstrap tooltip - tooltip function not found
我试图在引导中使用工具提示,以便当用户鼠标悬停在链接上时,文本出现。您可以在这里看到它的样子:http://getbootstrap.com/javascript/#tooltips
相反,当我将鼠标移到链接上时,什么也不会发生。这是我的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 a 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>
这是我在头文件中运行的JS:
<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'
});
});
当我运行页面时,我得到这个错误:TypeError: $(…)。工具提示不是一个函数。我认为这可能是因为我错误地链接到jquery和bootstrap.min.js,但我可以导航到它们,它们看起来很好。此外,我尝试用链接到各自的CDN来替换它们,但没有任何区别。
下面是我要链接到的JS文件:
<!-- 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>
为工具提示添加JS
https://jsfiddle.net/Skaadel/ewscg13g/JS工具提示
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
看起来您没有添加tooltip.js。这是您需要包含的附加插件。
我想你没有正确地包含js和CSS,因为这里它在jsfiddle中工作得很好。
这里是演示工作示例
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<div class="tooltipss">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
我在这里试过你的代码,我所要改变的是.tip-left
到.tip-bottom
。不知为什么左边的工具提示不可见。我建议您尝试删除脚本,这是不需要为您的工具提示工作(jquery以外的任何东西,bootstrap.min.js, bootstrap.min.css和font-awesome.min.css),因为bootstrap不能很好地与其他jquery插件,如jquery-ui等。
相关文章:
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- d3.js用按钮更新条形图工具提示
- 使Intro.js工具提示响应
- 画布中绘制的矩形区域的弹出工具提示
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- 禁用NVD3 multiBarHorizontalChart中0值的工具提示
- 如何更改已显示的工具提示
- 如何在jQuery.awesomeCloud.plugin上添加jQuery工具提示功能
- 引导工具提示/popover功能问题
- 如何将工具提示功能添加到高级图表中的 X 轴标签
- 引导 - 工具提示中带有 OnClick 功能的按钮
- 需要jquery工具提示与关闭功能
- 引导工具提示-没有找到工具提示功能
- 跨浏览器高级工具提示功能
- Highcharts -需要高级工具提示功能
- 使用jQuery或Javascript为select2下拉菜单添加工具提示功能
- 在jQuery中从头开始构建工具提示功能