ブートストラップツールチップが初めて成功しましたが、2回目にキャッチされないTypeErrorが発生します

Question

私のlaravelプロジェクトでブートストラップツールチップを使用しようとしています。ここで

は私blade.phpコードです：

... 
@foreach($patients => $patient) 
    ... 
    //This is the tooltip button 
    <div data-toggle="tooltip" class="btn btn-default comment-tooltip" data-patient-id="{{ $patient->patient_id }}"><i class="fa fa-book" aria-hidden="true"></i></div> 


    //this is the div i wanna show after hovering tooltip button 
    <div id="{{$patient->patient_id}}" style="visibility: hidden"> 
    some text 
    </div> 
    ... 
@endforeach 
... 

そして、ここでは私のjavascriptのコード

$(document).ready(function() { 

    $('.comment-tooltip').tooltip({ 
     title: function() { 
     var patient_id = $(this).data('patient-id'); 
     var element = document.getElementById(patient_id); 
     element.style.visibility = 'visible'; 
     return element; 
     }, 
     html: true, 
     placement: 'right', 
     callback: function(){ 
     var patient_id = $(this).data('patient-id'); 
     var element = document.getElementById(patient_id); 
     element.style.display = 'none'; 
     } 
    }); 
}); 

だと、私は初めてのボタンを置くと、私は置くと、それは

を動作しますが、もう一度、コンソールにエラーメッセージを表示します。

Uncaught TypeError: Cannot read property 'style' of null 

誰かがこの問題を解決するのに役立つことを願っています。ありがとう!!あなたがツールチップ

<div data-toggle="tooltip" data-original-title="Message will be here to show on mouse over." data-placement="right" data-container="body"> <i class="fa fa-book" aria-hidden="true"></i> </div>

については、以下のこの長いコード

Answer 1

あなたは、コールバック関数を心配する必要はありません。 これは私が多くのプロジェクトで使っている非常に簡単な方法です。 非常に簡単で効果的です。 ツールチップを表示する際に問題が発生していることをご了承ください。 私が間違っている場合は私を修正してください。

Answer 2

<span class="fa fa-info-circle" data-toggle="tooltip" title="your message here"> 
<script> 
    $('[data-toggle="tooltip"]').tooltip(); 
</script> 

の必要性を使用することはできません