Question

我想从boostrap制作工具提示，当选择输入选择时，在元素html中显示工具提示。我在javascipt / 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'
            });
        }
    });

但这段代码不起作用。你能帮助我吗。请

Answer 1

bootstrap插件方法只接受一个参数，而不是两个。这个方法调用：

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

不正确。相反，你应该按照你的方式保持更改功能，并调用：

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

之前设置工具提示选项（例如文档准备就绪时）。

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

Answer 2

in html：

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

在jquery中：

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

Answer 3

这对我有用

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

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

更改放置引导工具提示

4 个答案: