Tooltip from specific <div>

Question

I have a webpage with many sites which contains informations about items. I get the informations out of a mysql database. Now I need tooltips out of these informations.

I´m searching a solution to get the "echo" in a tooltip. It shouldn´t be much code, because I want to use the tooltips very often. The question is, woulnd´t it be easier to get the whole <div class="itembox"> in a tooltip?

Here is the code:

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



    <div id="container">
    <div class="itembox">
    <?php
    $con = mysqli_connect("localhost","XXXXX","XXXXX","XXXXXXX");


    // Check connection
    if (mysqli_connect_errno())
      {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
      }



    /* change character set to utf8 */
    if (!mysqli_set_charset($con, "utf8")) {
        printf("Error loading character set utf8: %s\n", mysqli_error($con));
        exit();
    } else {

    }

    $sql = "SELECT * FROM TEST WHERE id=8778";

    $result = mysqli_query($con,$sql)or die(mysqli_error());

    echo "<table>";


    while($row = mysqli_fetch_array($result)) {
        $name= $row['name'];
        $itemLevel= $row['itemLevel'];


        echo
    "<tr><td class='nameepisch'>".$name."</td></tr>
    <tr><td class='itemstufe'>Gegenstandsstufe ".$itemLevel."</td></tr>

    </tr>";
    }

    echo "</table>";

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>


    mysqli_close($con);
    ?>

</div>
</div>

Answer 1

The simplest way for html tooltips is assigne a proper value to the title attribute of a tag eg:

if $myTooTiptext is the text you want show could be somethings like this

  echo
   "<tr><td class='nameepisch' title='".$myToolTiptext .">".$name."</td></tr> 
    <tr><td class='itemstufe'>Gegenstandsstufe ".$id[$itemLevel]."</td></tr>

When you move over the td for name the tooltip text is showed

Answer 2

In case you're using Bootstrap, you can do like this:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

And, don't forget to add Bootstrap CSS and JS inside the page:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>