Question

我正在尝试使用Bootstrap中的工具提示，以便当用户鼠标悬停链接时，会显示文本。您可以在此处查看它的外观：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：$（...）。tooltip不是函数。我认为这可能是因为我错误地链接到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>

Answer 1

为工具提示添加JS

https://jsfiddle.net/Skaadel/ewscg13g/

工具提示JS

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Answer 2

看起来你没有添加tooltip.js。它是您需要包含的附加插件。

Answer 3

我认为你还没有把js和css包括在内，因为它在jsfiddle中对我很好。

这是演示工作示例

＆＃13;

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

＆＃13;

<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>

＆＃13;

Answer 4

我尝试了您的代码here，我必须更改的是.tip-left到.tip-bottom。不知何故，工具提示在左侧不可见。我建议你尝试删除脚本，这些脚本不需要你的工具提示工作（jquery，bootstrap.min.js，bootstrap.min.css和font-awesome.min.css除外），因为bootstrap不能正常工作与其他jquery插件，如jquery-ui等。

Bootstrap工具提示 - 未找到工具提示功能

4 个答案: