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

Question

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

问题在于引导工具提示似乎忽略了动态创建的属性。我尝试在 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/