CODEWITHSUNDEEP
jquerytwitter-bootstrap-3tooltip
vincentieo
vincentieo

Reputation: 938

Bootstrap tooltip strange position

So I have read all the docs on bootstrap 3 and done some googling yet I cant seem to work out the solution. I have 3 columns, the first and last column contain div with class of feature. When these are clicked, the tooltip show. Excellent, all working (only setup on Push Notifications and app sharing features in current example) except the tool tip will only appear above the first feature and not directly above the clicked feature.

Example: http://madmantis.co.uk/buy-an-app/repos/front-end/mint-theme/ - scroll down to the features section.

Code (partial): HTML:

<div class="col col-lg-4 features">

        <div class="feature" data-toggle="tooltip" title="Push notifications allow you to send instant messages directly to your customer’s phone, placing your brand firmly in the palm of your customers hands">
            <div class="col col-lg-8">
                <h3>Push Notifications</h3>
                <p>Reach your customers with adverts and special offers</p>
            </div>
            <div class="col col-lg-4 icon">
                <i class="fa fa-info fa-3x"></i>
            </div>
        </div>

        <div class="feature" data-toggle="tooltip" title="Encourage your customers to share your app, spreading the word and taking your brand viral.  Offer a referal reward or discount when customers send your app to their friends.">
            <div class="col col-lg-8">
                <h3>App sharing</h3>
                <p>Help your customers spread the word with the push of a button</p>
            </div>
            <div class="col col-lg-4 icon">
                <i class="fa fa-share-square fa-3x"></i>
            </div>
        </div>

JS:

$('.features .feature').tooltip({
            container: 'body',
            trigger: 'click'
        });

Upvotes: 0

Views: 910

Answers (1)

mccannf
mccannf

Reputation: 16659

The div .feature has no height when rendered.

If you add the class row to each div, it should work. Like so:

    <div class="feature row" data-toggle="tooltip" title="Push notifications allow you to send instant messages directly to your customer’s phone, placing your brand firmly in the palm of your customers hands">
        <div class="col col-lg-8">
            <h3>Push Notifications</h3>
            <p>Reach your customers with adverts and special offers</p>
        </div>
        <div class="col col-lg-4 icon">
            <i class="fa fa-info fa-3x"></i>
        </div>
    </div>

Upvotes: 1

Related Questions