change placement bootstrap tooltip

Question

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

Solution 1

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.

Solution 2

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();
});

Solution 3

This worked for me

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

Comments

[mohammed Suleiman]

Thank you, this helped me, because I use tooltip in many places in bottom position and I wanted to change the position in some cases to top, for example table tr:last-child td a in a grid with scroll.

[Mlle 116]

I tried many solutions but nothing worked until I found this one which provides destroying tooltip before changing the placement, so thank you !