在PHP调用API的页面中为图片添加顶部悬停Tooltip

我通过公开API获取了Habbo徽章数据，想给图片添加鼠标悬停时显示标题/描述的Tooltip，跟着教程修改代码时一直出错，求帮忙。原代码如下：

<?php
  $url = 'https://api.habboemotion.com/public/badges/new';
  $result = json_decode(file_get_contents($url));
  $data = $result->data;
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Latest Habbo Badges</title>
    <style type="text/css">
      #items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      
        #items .item {
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    </style>
  </head>
  <body>
    <h2>Badges (<?php echo $data->total; ?>)</h2>
    <div id="items">
      <?php 
        foreach($data->badges AS $badge) {
          if(!$badge->exist) {
            $badge->image = 'https://files.habboemotion.com/resources/images/icons/toolbar_06.gif';
          }
      ?>
       <div class="item">
         <img src="<?php echo $badge->image; ?>" title="<?php echo $badge->code; ?> - <?php echo $badge->name; ?>" alt="" />
       </div> 
      <?php 
        }
      ?>
    </div>
  </body>
</html>

解决方法 #

方案1：修复原生title属性（快速生效） #

你原代码里已经给图片加了title属性，但可能因为返回的code或name包含特殊字符（比如引号、尖括号），导致HTML结构被破坏，Tooltip无法正常显示。只需要把动态输出的内容用htmlspecialchars()转义即可：

修改img标签的title部分：

<img src="<?php echo htmlspecialchars($badge->image); ?>" title="<?php echo htmlspecialchars($badge->code . ' - ' . $badge->name); ?>" alt="<?php echo htmlspecialchars($badge->name); ?>" />

方案2：自定义样式Tooltip（更美观可控） #

如果不满意浏览器默认的Tooltip样式，可以用CSS实现自定义悬浮框，效果更灵活：

以下是完整修改后的代码：

<?php
  $url = 'https://api.habboemotion.com/public/badges/new';
  $result = json_decode(file_get_contents($url));
  $data = $result->data;
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Latest Habbo Badges</title>
    <style type="text/css">
      #items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px; /* 增加徽章间距，避免Tooltip重叠 */
        padding: 10px;
      }
      
      #items .item {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; /* 为Tooltip定位提供基准 */
        cursor: pointer;
      }

      /* 自定义Tooltip样式 */
      .item .badge-tooltip {
        position: absolute;
        bottom: 120%; /* 显示在图片上方 */
        left: 50%;
        transform: translateX(-50%);
        background-color: #222;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap; /* 保持内容单行显示 */
        opacity: 0;
        pointer-events: none; /* 不干扰鼠标对图片的操作 */
        transition: opacity 0.2s ease;
        z-index: 100;
      }

      /* 鼠标悬停时显示Tooltip */
      .item:hover .badge-tooltip {
        opacity: 1;
      }

      /* 给Tooltip添加底部小三角 */
      .item .badge-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #222;
      }
    </style>
  </head>
  <body>
    <h2>Badges (<?php echo $data->total; ?>)</h2>
    <div id="items">
      <?php 
        foreach($data->badges AS $badge) {
          if(!$badge->exist) {
            $badge->image = 'https://files.habboemotion.com/resources/images/icons/toolbar_06.gif';
          }
          // 统一转义动态内容，避免HTML错误
          $tooltipContent = htmlspecialchars($badge->code . ' - ' . $badge->name);
          $imageSrc = htmlspecialchars($badge->image);
      ?>
       <div class="item">
         <img src="<?php echo $imageSrc; ?>" alt="<?php echo $tooltipContent; ?>" />
         <span class="badge-tooltip"><?php echo $tooltipContent; ?></span>
       </div> 
      <?php 
        }
      ?>
    </div>
  </body>
</html>

关键修改点：

1. 给.item添加position: relative，让Tooltip能基于它定位
2. 新增.badge-tooltip的CSS样式，默认隐藏，鼠标悬停时通过opacity:1显示
3. 所有动态输出的内容（图片地址、Tooltip文本）都用htmlspecialchars()转义，防止特殊字符破坏HTML结构
4. 增加gap和内边距，让徽章布局更宽松，避免Tooltip互相遮挡

内容的提问来源于stack exchange，提问作者Aymeric Pellier