Question

我真的想在我的一些输入字段旁边放一个小问号图像，这样用户就可以点击并获得一个小框出现并提供一些帮助文本。工具提示也可能适用于此。这就是我想要的：

用户点击图片时弹出一个小文字区域的脚本（不是新窗口，只是用户点击其他地方时文字和链接消失的区域）
问号的漂亮小方形图像。

谢谢！

Answer 1

我使用BeautyTips，一个用于显示信息工具提示/气球的jQuery插件，查看demos。

_{（来源：lullabot.com）}

Answer 2

如果您不介意它出现在悬停而非点击时，它可以完全在CSS中完成。试试这个：

<html>
  <head>
    <style type='text/css'>
      a.helpAnchor {
        position:relative;
        text-decoration:none;
      }
      a.helpAnchor .helpIcon {
        position:absolute;
        text-align:center;
        font-size:24px;
        font-weight:bold;
        width:30px;
        height:30px;
        color:#ff0;
        background-color:#88f;
      }
      a.helpAnchor .helpText { 
        display:none; 
      }
      a.helpAnchor:hover .helpText {
        display:block;
        position:absolute;
        width:150px;
        top:10px;
        left:20px;
        background-color:#eff;
        color:black;
        border:1px solid black;
      }
    </style>
  </head>
  <body>
    <a href="#" class="helpAnchor">
      <div class="helpIcon">?</div>
      <div class="helpText">
        <h1>Help Text</h1>
        <p>This text is very helpful!</p>
        <p>And so is this!</p>
      </div>
    </a>
  </body>
</html>

如果问号图标是图像，它看起来会更好 - 并简化CSS。帮助文本的CSS也需要调整味道。

简单的javascript和图像在网页上的帮助文本

2 个答案: