Question

在jQuery's webste上，这个问题正在发生。当您将鼠标悬停在图像上时，工具提示会显示在图像下方，从而用户无法看到工具提示。

可以在图像顶部显示提示，因此用户可以看到它。

有没有办法解决这个问题？我已经看到其他工具提示显示在顶部或底部，具体取决于它最佳显示位置。

jQuery Tooltip可以这样做吗？

Answer 1

作为一种解决方法，我决定始终将它显示在右上角。

以下代码有效，包括在工具提示中允许使用HTML。请注意，我需要640px div，否则640px图像会在第一次出现时出现在可见区域之外。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery tooltip</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type='text/css'>
div.ui-tooltip {
    max-width: 100%;
}
.ui-tooltip {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    line-height: 150%;
}
</style>
<script type='text/javascript'>
  $(function () {
      $(".RightTooltip").tooltip({
          content: function () {
              return $(this).prop('title')
      },
      position: {
          my: "right top",
          at: "right top",
          of: window
          }
      });
  });
</script>
</head>
<body>
<p class="Text"><a class="RightTooltip" href="#" title='<div style="width:640px;">Image below.</div><img src="http://www.oahure.com/data/2014/201417772/2.jpg"/>'>Tooltip</a></p>
</body>
</html>

jQuery UI Tooltip出现在窗口外，因此观看者无法看到它

1 个答案: