更改 Bootstrap 工具提示的位置

Question

我想从Bootstrap创建工具提示，当输入选择已选择时，工具提示显示在HTML元素中。 我已经用JavaScript / jQuery编写了该代码。 这是代码：

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

我希望将工具提示的位置设置在右侧。

我尝试了以下代码：

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

但是这段代码不能正常工作，你能帮我吗？谢谢。

- ramadani

---

你能否分享完整的非工作代码在http://jsfiddle.net吗？顺便说一句，这与Twitter Bootstrap无关。 - Victor

@Victor，这似乎在询问有关bootstrap tooltip api的问题，因此确实与bootstrap有点关系 :) - zkcro

@ZaidCrouch，抱歉，我漏掉了“提示文本”。 :P - Victor

Answer 1

Bootstrap插件方法只需要一个参数，而不是两个。这个方法调用：

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

是不正确的。相反，您应该保持on change函数的方式，并调用：

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

在文档准备好时，可以更早地设置工具提示选项（例如）。

另一种可能更简单的方法是向显示弹出窗口的元素添加data-position="right"。

- zkcro

Answer 2

在HTML中：

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

在jQuery中：

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

- cfz

Answer 3

这对我有用。

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

- ShAkKiR

---

谢谢，这对我很有帮助，因为我在许多地方使用 tooltip 位于 bottom 位置，而我想在某些情况下将其位置更改为 top，例如在带滚动条的网格中的 table tr:last-child td a。 - mohammed Suleiman

我尝试了许多解决方案，但直到我找到这个在更改位置之前提供销毁工具提示的解决方案才起作用，所以谢谢！ - Mlle 116

Answer 4

对于我的情况，我需要根据屏幕尺寸更改工具提示的位置。作为解决方案，我监听分辨率更改事件，然后在事件处理程序中销毁旧的工具提示，并添加一个新的工具提示，其位置根据新的宽度大小确定：

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

- Vivens Ndatinya