Question

我正在尝试将工具提示添加到我的表格数据（参见图片），并且每当加载页面时我都加载了工具提示功能。但我无法看到表格数据的任何工具提示。

这里是html的代码

<div class="row freightData">
    <div class="col-sm-2 tabularData" data-toggle="tooltip" data-placement="bottom">
        <dl class="dl-horizontal"  data-toggle="tooltip" data-placement="bottom" title="">
            <dt>Booking</dt>
            <dd>{{bookingData.bookingNumber}}</dd>

            <dt>Shipper</dt>
            <dd>{{bookingData.shipper}}</dd>

            <dt>Consignee</dt>
            <dd>{{bookingData.consignee}}</dd>

            <dt>VVD</dt>
            <dd>{{bookingData.vvd}}</dd>
        </dl>
    </div>

这是我加载的jQuery函数：

$(document).ready(function() {
    console.log('tooltip loading');
    $('[data-toggle="tooltip"]').tooltip();   
});

我的工具提示功能也在加载，但当我将鼠标悬停在图片中显示的表格数据上时，我无法弹出。请帮帮我。

Answer 1

给你的工具提示一些值

<div class="row freightData">
    <div class="col-sm-2 tabularData" data-toggle="tooltip" data-placement="bottom">
        <dl class="dl-horizontal"  data-toggle="tooltip" data-placement="bottom" title="Your Tool tip text here">
            <dt>Booking</dt>
            <dd>{{bookingData.bookingNumber}}</dd>

            <dt>Shipper</dt>
            <dd>{{bookingData.shipper}}</dd>

            <dt>Consignee</dt>
            <dd>{{bookingData.consignee}}</dd>

            <dt>VVD</dt>
            <dd>{{bookingData.vvd}}</dd>
        </dl>
    </div>

http://jsfiddle.net/70xps5sd/

如果要在列中显示值作为工具提示

，则更新

<div class="row freightData">
        <div class="col-sm-2 tabularData">
            <dl class="dl-horizontal">
                <dt>Booking</dt>
                <dd data-toggle="tooltip" data-placement="bottom" title="{{bookingData.bookingNumber}}">{{bookingData.bookingNumber}}</dd>

                <dt>Shipper</dt>
                <dd data-toggle="tooltip" data-placement="bottom" title="{{bookingData.bookingNumber}}">{{bookingData.shipper}}</dd>

                <dt>Consignee</dt>
                <dd data-toggle="tooltip" data-placement="bottom" title="{{bookingData.consignee}}">{{bookingData.consignee}}</dd>

                <dt>VVD</dt>
                <dd data-toggle="tooltip" data-placement="bottom" title="{{bookingData.vvd}}">{{bookingData.vvd}}</dd>
            </dl>
        </div>

更新小提琴：http://jsfiddle.net/70xps5sd/1/

Answer 2

只需尝试下面的代码行来显示工具提示。

<div class="row freightData">
    <div class="col-sm-2 tabularData">
        <dl class="dl-horizontal">
            <dt>Booking</dt>
            <dd data-toggle="tooltip" data-placement="bottom" data-original-title="{{bookingData.bookingNumber}}">{{bookingData.bookingNumber}}</dd>

            <dt>Shipper</dt>
            <dd data-toggle="tooltip" data-placement="bottom" data-original-title="{{bookingData.bookingNumber}}">{{bookingData.shipper}}</dd>

            <dt>Consignee</dt>
            <dd data-toggle="tooltip" data-placement="bottom" data-original-title="{{bookingData.consignee}}">{{bookingData.consignee}}</dd>

            <dt>VVD</dt>
            <dd data-toggle="tooltip" data-placement="bottom" data-original-title="{{bookingData.vvd}}">{{bookingData.vvd}}</dd>
        </dl>
    </div>
</div>

谢谢！

Answer 3

我添加了一个小提琴手，可能就是你要找的......

"https://jsfiddle.net/3435x2fc/"

请复制链接并检查我在将其添加到我的评论中时遇到问题

使用jquery添加工具提示

3 个答案:

给你的工具提示一些值