Динамически создайте всплывающую подсказку для пустых полей

Question

Я пытаюсь написать скрипт jquery, который позволяет мне создавать всплывающие подсказки для полей выбора, которые не имеют значения в нем. Мое требование состоит в том, что он должен динамически создавать подсказки в моем js-коде, то есть он должен работать без записи атрибутов «data-toggle», «data-placment» и «title» в html-коде.

Проблема заключается в том, что всплывающая подсказка для бутстрапа игнорирует атрибуты, которые динамически создаются. Я попытался вручную записать атрибуты для всплывающей подсказки в 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/