Popover or Tooltip doesn't work at all in my browser

Question

I tried all day to have some popovers in my table that shows more information for each cell. But I came to the conclussion, popovers do not work at all in my code. How and Why? Anyone any idea what it can be?

<td>
        <div>
                <span class="btn" id="infoItem" data-toggle="popover" rel="popover">
                    <?php echo $row[0] ?>
                </span>
                <script>
                    $(document).ready(function() {
                        $('[data-toggle="infoItem"]').popover({
                            html: true,
                            animation: false,
                            content: <?php echo $row[0] ?>,
                            placement: "bottom"
                        });
                    });
                </script>
            </div>
    </td>

For now I just show the same info in the popover as in the cell. The info shows in the cell so the popover is not empty.

Answer 1

Here is the working JS Fiddle

$(document).ready(function() {
    $('[data-toggle="popover"]').popover({
        html: true,
        animation: false,
        content: 'World',
        placement: "bottom"
    });
});

Answer 2

i realized you are missing some quotes '' and a semi colon on your script

<td>
        <div>
                <span class="btn" id="infoItem" data-toggle="popover" rel="popover">
                    <?php echo $row[0]; ?>
                </span>
                <script>
                    $(document).ready(function() {
                        $('[data-toggle="infoItem"]').popover({
                            html: true,
                            animation: false,
                            content: '<?php echo $row[0]; ?>',
                            placement: "bottom"
                        });
                    });
                </script>
            </div>
    </td>