javascript - 使用 jquery 添加工具提示

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

给你的工具提示一些值(value)

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

更新了 fiddle :http://jsfiddle.net/70xps5sd/1/