ブートストラップ - 複数のツールチップが同じ要素（ "html"）にバインドします

動的に作成するツールチップを追加したいと考えていますdiv -s。私の場合、htmlタグだけは変更されません。簡単な例：ブートストラップ - 複数のツールチップが同じ要素（ "html"）にバインドします

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    </head> 

    <script type="text/javascript"> 
    (function(){ 

    $(document).ready(function(){ 

    $('html').tooltip({ 
      "title": function(){ 
         return $(this).attr("a"); 
        }, 
      "selector": ".a" 
    }); 

    $('html').tooltip({ 
      "title": function(){ 
         return $(this).attr("b"); 
        }, 
      "selector": ".b" 
    }); 
    }); 

})(); 
    </script> 

    <body>  

     <div class="a" a="testa" style="margin: 100px; width: 20px; height: 20px; background-color:grey;">testa</div> 

     <div class="b" b="testb" style="margin: 100px; width: 20px; height: 20px; background-color:purple;">testb</div> 

</body> 
</html>

最初のツールチップが機能し、2番目のツールチップは機能しません。私は1つのバインドのみを使用して回避策を知っていますが、問題は、これが例のように複数のツールチップを同じ要素にバインドすることが可能な場合です。

出典

2017-09-04 RSzT

あなたが実行したい各ツールヒントのために、このようなツールチップのコンストラクタを使用することができます。ここでは

new $.fn.tooltip.Constructor($('html'), { 
    "title": function(){ 
    return $(this).attr("name"); 
    }, 
    "selector":'.a', 
});

はJSFiddle

です

出典

2017-09-05 01:11:04

ブートストラップ - 複数のツールチップが同じ要素（ "html"）にバインドします

答えて

関連する問題