CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
anil
anil

Reputation: 77

Adding tooltip with jquery

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

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.

Upvotes: 0

Views: 292

Answers (3)

Vinod Patidar
Vinod Patidar

Reputation: 685

Simply just try below lines of code to show 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>

Thanks!

Upvotes: 0

Amar
Amar

Reputation: 417

I have added a fiddler, might be what you are looking for...

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

Please copy the link and check as i am having trouble in adding it to my comment

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

Give your tool tip some 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/

Updated if you want to show value in columns as 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>

updated fiddle : http://jsfiddle.net/70xps5sd/1/

Upvotes: 4

Related Questions