I am trying to add tooltip to my tabular data(see pic) and i have loaded the tool tip function whenever the page is loaded . But i cant see any tooltip on tabular data .

[![enter image description here](https://i.stack.imgur.com/0y5OW.png)](https://i.stack.imgur.com/0y5OW.png)

here is code of 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>

```

And this is the jQuery function I have loaded: 

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

```

My Tooltip function is also loading but I cant get pop over when I hover on tabular data like shown in image. Please help me.