Question

我有一个包含许多网站的网页，其中包含有关商品的信息。我从mysql数据库中获取信息。现在我需要这些信息中的工具提示。

我正在寻找一个解决方案，以便在工具提示中获得“回声”。它应该不是很多代码，因为我想经常使用工具提示。问题是，在工具提示中获取整个<div class="itembox">会更容易吗？

以下是代码：

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

html工具提示的最简单方法是为标签的title属性赋予适当的值，例如：

如果$myTooTiptext是你要展示的文字可能是这样的事情

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

当您移动名称的td时，将显示工具提示文本

Answer 2

如果你正在使用Bootstrap，你可以这样做：

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

并且，不要忘记在页面中添加Bootstrap CSS和JS：

<!-- 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>的工具提示

2 个答案: