Question

我正在尝试编写jquery脚本，让我可以为没有值的选择字段创建工具提示。我的要求是它必须在我的js代码中动态创建工具提示，这意味着它应该在没有在html代码中编写“data-toggle”，“data-placment”和“title”属性的情况下运行。

问题是bootstrap工具提示似乎忽略了动态创建的属性。我尝试在html代码中手动编写工具提示的属性并且它工作正常，但是一旦我将其更改为下面的代码它只是不起作用。

到目前为止，这是我的代码。如果压缩很难理解，请原谅。

jQuery(function()
{
    jQuery('[id*=form_fields_]').each(function(index, value)
    {
        if (jQuery(this).prop("tagName") == "SELECT" && jQuery(this).val() == "")
        {
            jQuery(this).data('toggle', 'tooltip');
            jQuery(this).data('placement', 'right');
            jQuery(this).attr('title', 'Please select an item');
            jQuery(this).tooltip(
            {
                container: 'body'
            });
            jQuery(this).tooltip();
            jQuery(this).on("hidden.bs.tooltip", function()
            {
                jQuery(this).css("display", "");
                jQuery(this).tooltip('disable');
            });
        }
    });
    jQuery('[data-toggle=tooltip]').tooltip('show');
});

Answer 1

jQuery(function()
{
    jQuery('[id*=form_fields_]').each(function()
    {
        if (jQuery(this).val().length <=0)
        {
            jQuery(this).data('toggle', 'tooltip');
            jQuery(this).data('placement', 'bottom');
            jQuery(this).attr('title', 'Please select an item');
            jQuery(this).tooltip(
            {
                container: 'body'
            });
        }
        jQuery(this).keyup(function()
        {
                console.log(jQuery(this).val().length);
            if (jQuery(this).val().length <=0)
            {
                jQuery(this).data('toggle', 'tooltip');
                jQuery(this).data('placement', 'bottom');
                jQuery(this).attr('title', 'Please select an item');
                jQuery(this).tooltip(
                {
                    container: 'body'
                });
                if(jQuery(this).focus()){
                    jQuery(this).tooltip(
                    {
                        container: 'body'
                    });
                }
            }
            else
            {
                jQuery(this).tooltip('destroy');     
            }
        });
    });
});

jsfiddle https://jsfiddle.net/qekg2zpm/12/

动态创建空白字段的引导工具提示

1 个答案: