CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Abbie
Abbie

Reputation: 5

bootstrap 3 tooltip using html not working

I try to use bootstrap 3 tooltip in my website, and use html to show the content of tooltip, but I get an error: Cannot read property 'user' of undefined.

<div class="container">
  <a href="#" data-toggle="tooltip" data-idx="0">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="1">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="2">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="3">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="4">Hover over me</a>
</div>

$(document).ready(function() {
  var data = [{'user': "Amy"}, {'user': "Betty"}, {'user': "Cindy"}, {'user': "Debby"}, {'user': "Emily"}];
  setTooltip(data);
})

function setTooltip(data) {
  for (var i = 0; i < data.length; i++) {
    $('[data-idx="' + i + '"]').tooltip({
      html: true,
      title: function() {
        return "<p>User: " + data[i].user + "</p>";
      }
    });
  }
}

This is the result in the console:

enter image description here

Does anybody have this problem? Thank you.

Upvotes: 0

Views: 1116

Answers (3)

Junaid Ali
Junaid Ali

Reputation: 361

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <title>Tooltip Test</title>
</head>
<body>
<div class="container">
  <a href="#" data-toggle="tooltip" data-idx="0">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="1">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="2">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="3">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="4">Hover over me</a>
</div>
</body>
</html>
$(document).ready(function() {
  var data = [{'user': "Amy"}, {'user': "Betty"}, {'user': "Cindy"}, {'user': "Debby"}, {'user': "Emily"}];
  setTooltip(data);
})

function setTooltip(data) {
  for (var i = 0; i < data.length; i++) {
    $('[data-idx="' + i + '"]').tooltip({
      title: "User: " + data[i].user
    });
  }
}

Please try the above solution it is working fine. The issue I found in your code that you were using a function() to set the tooltip and the data[i] was undefined within that scope.

Tested link: https://jsbin.com/viyipewale/edit?html,js

Upvotes: 0

Maths RkBala
Maths RkBala

Reputation: 2195

Please try this following:

function setTooltip(data) {
  for (var i = 0; i < data.length; i++) {
    if($('[data-idx="' + i + '"]').length > 0){//Checking the element exists or not
      $('[data-idx="' + i + '"]').tooltip({
        title: "User: " + data[i].user 
      });
    }
  }
}

It's working fine.

Upvotes: 0

Dieter Casier
Dieter Casier

Reputation: 653

You will have to update your setTooltip function:

function setTooltip(data) {
  for (var i = 0; i < data.length; i++) {
    const name = data[i].user;
    $('[data-idx="' + i + '"]').tooltip({
      html: true,
      title: "<p>User: " + name + "</p>"
    });
  }
}

Working fiddle: https://jsfiddle.net/yqdhkcvz/10/

Upvotes: 1

Related Questions