Javascript 使用jquery添加工具提示

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

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

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

下面是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>

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

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

给你的工具提示一些价值

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

预订
{{bookingData.bookingNumber}
托运人
{{bookingData.shipper}
收货人
{{bookingData.收货人}
VVD
{{bookingData.vvd}

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

如果要将列中的值显示为工具提示，则更新

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

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

预订
{{bookingData.bookingNumber}
托运人
{{bookingData.shipper}
收货人
{{bookingData.收货人}
VVD
{{bookingData.vvd}

更新的小提琴：

给你的工具提示一些价值

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

预订
{{bookingData.bookingNumber}
托运人
{{bookingData.shipper}
收货人
{{bookingData.收货人}
VVD
{{bookingData.vvd}

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

如果要将列中的值显示为工具提示，则更新

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

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

预订
{{bookingData.bookingNumber}
托运人
{{bookingData.shipper}
收货人
{{bookingData.收货人}
VVD
{{bookingData.vvd}

---

更新的fiddle:

只需在代码行下方尝试显示工具提示即可

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

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

预订
{{bookingData.bookingNumber}
托运人
{{bookingData.shipper}
收货人
{{bookingData.收货人}
VVD
{{bookingData.vvd}

---

谢谢

只需在代码行下方尝试显示工具提示即可

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

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

预订
{{bookingData.bookingNumber}
托运人
{{bookingData.shipper}
收货人
{{bookingData.收货人}
VVD
{{bookingData.vvd}

---

谢谢

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

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

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

---

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

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

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

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

---

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

工具提示值将来自标题，它为空。工具提示值将来自标题，它为空。我尝试添加此标题属性，但我尝试捕获标记的值，如图所示，但我不确定如何操作。嗨，我尝试添加此title属性，但我尝试捕获标记的值，如图所示，但我不确定如何操作。不仅title它应该像data original title=“Hello World”不仅title它应该像data original title=“Hello World”

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