CODEWITHSUNDEEP
jquerytwitter-bootstraptooltip
ramadani
ramadani

Reputation: 449

change placement bootstrap tooltip

I want to make tooltip from boostrap, when input select has selected so tooltip show in element html. I have made that code in javascipt/jquery. this is code:

    $('#pembayaran').on('change', function(){
        if($(this).val()=='GRATIS' && $('#keterangan').val()==''){
            $('#keterangan').attr('title', 'Keterangan wajib disi!').tooltip('show');
        }
    });

I want to make tooltip position on right.

I try code

    $('#pembayaran').on('change', function(){
        if($(this).val()=='GRATIS' && $('#keterangan').val()==''){
            $('#keterangan').attr('title', 'Keterangan wajib disi!').tooltip('show', {
               placement: 'right'
            });
        }
    });

but this code not working. Can you help me. please

Upvotes: 3

Views: 14213

Answers (4)

Vivens Ndatinya
Vivens Ndatinya

Reputation: 154

For my case I needed to change the placement of the tooltip based on the screen size, as a solution I listen to the resolution change event, then in the event handler I destroy the old tooltip and add a new one with the placement determined according to the new width size: 

$(document).ready(function() {
    var enablePasswordTooltip = function() {
        var passwordTooltipContent = $('#PasswordTooltipContent').html();
        var isMobileResolution =  ($(window).width() < 700);
        $('input.password-tooltip').tooltip({
            'trigger': 'focus',
            'placement': isMobileResolution ? 'top' : 'right',
            'html': true,
            'title': passwordTooltipContent
        });
    };

    // Enable the Password tooltip when the page is loaded
    enablePasswordTooltip();

    $(window).resize(function() {
        // After the resolution changes, destroy the tooltip and add it again in order to adjust to the new resolution
        $('input.password-tooltip').tooltip('destroy'); 
        setTimeout(function(){
            enablePasswordTooltip();
        }) 
    });
});

Upvotes: 0

ShAkKiR
ShAkKiR

Reputation: 929

This worked for me

    $('.mytooltip').tooltip('destroy');
    $('.mytooltip').tooltip({ placement: 'right' });

Upvotes: 2

cfz
cfz

Reputation: 343

in html: 

<a href="sample.html" data-placement="right" rel="tooltip" title="This is a tooltip">Hover me!</a>

in jquery:

$(function(){
    $("[rel='tooltip']").tooltip();
});

Upvotes: 3

zkcro
zkcro

Reputation: 4344

The bootstrap plugin methods take a single argument, not two. This method call:

$('#keterangan').attr('title', 'Keterangan wajib disi!').tooltip('show', {
    placement: 'right'
});

is incorrect. Instead, you should keep the on change function the way you had it, and call:

$('#keterangan').tooltip({ placement: 'right' });

earlier to set up the tooltip options (such as when the document is ready).

The other, possibly simpler, alternative would be to add data-position="right" to the element that the pop-up is being shown on.

Upvotes: 6

Related Questions