bootstrap tooltip success on first time but get Uncaught TypeError on second time

Question

I am trying to use bootstrap tooltip in my laravel project.

Here's my blade.php code:

...
@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
...

And here's my javascript code

 $(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';
      }
    });
 });

And when I hover the button on first time, it works

But when I hover it on second time, it shows error message below in console

Uncaught TypeError: Cannot read property 'style' of null

Hope someone can help me fix this problem. Thanks!!

This is because `var element = document.getElementById(patient_id);` is `null` the second time. Without seeing more code and having a [MCVE](https://stackoverflow.com/help/mcve) it's hard to help. — Charlie Fish, Dec 15 '17 at 06:10
[getElementById returns null?](https://stackoverflow.com/questions/8739605/getelementbyid-returns-null) — Adelin, Dec 15 '17 at 06:20

Rakesh Yadav · Answer 1 · 2017-12-15T08:09:16.990

-1

You can use below for tooltip

<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>

no need for this long code

edited Dec 15 '17 at 08:09

answered Dec 15 '17 at 06:16

Rakesh Yadav

87
1
6

score -1 · Answer 2 · answered Dec 15 '17 at 06:35

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

you do not want to worry about callback function. this is very simple way i am using it in many projects. very simple and effective. as i understand you are getting a problem to show tooltip. correct me if i am wrong.

bootstrap tooltip success on first time but get Uncaught TypeError on second time

2 Answers2