将鼠标悬停在窗口边缘内时显示 div

Question

我想显示一个带有表格和里面有很多信息的 div。我的问题是，这取决于悬停元素所在的位置，信息超出了浏览器窗口的限制。我希望不要发生这种情况，但我不知道如何解决它。解决办法是什么？能够使用 CSS，尽管如果不可能，它也可以使用 Javascript

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
	
.tooltiptext, .tooltipTable {
	min-width: 200px;
	font-size: 11px;
}

<h2>Title</h2>
<div class="tooltip">Hover over me
	<div class="tooltiptext">
		<table class="tooltipTable" border="1">
			<tr>
				<td colspan="2">Lorem ipsum Lorem ipsum</td>
			</tr>
			<tr>
				<td>Title</td>
				<td>Text: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
			</tr>
			<tr>
				<td>Title</td>
				<td>Text: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
			</tr>
			<tr>
				<td>Title</td>
				<td>Text: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
			</tr>
			<tr>
				<td>Title</td>
				<td>Text: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
			</tr>
			<tr>
				<td>Title</td>
				<td>Text: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
			</tr>
			<tr>
				<td>Title</td>
				<td>Text: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
			</tr>
		</table>
	</div>
</div>

Answer 1

您可以使用 jQuery-UI。

它的工具提示很智能，可以放在页面上任何有空间的地方。

对于演示，我为窗口的所有四个角提供了工具提示。

• 您可以选择通过以下方式显示工具提示的内容

  items: "[data-tooltip], [data-tooltip2], [data-tooltip3], [data-tooltip4]"
  

  （你也可以使用类、id 等）

• 您可以通过以下方式检查当前悬停在哪个项目上

  if (element.is("[data-tooltip]"))
  

• 您可以通过以下方式决定每个项目的显示内容

  return "This is a small tooltip";或return tooltipText.innerHTML;等等

我将您的工具提示显示放在隐藏的div. 这样，它在屏幕上不可见，但innerHTML可以检索并显示。

jsfiddle： https: //jsfiddle.net/kn3xxtk4/4/

这是代码：

items: "[data-tooltip], [data-tooltip2], [data-tooltip3], [data-tooltip4]"

if (element.is("[data-tooltip]"))

$(function() {
  var tooltipText = document.getElementById("tooltiptext");
  $(document).tooltip({
    items: "[data-tooltip], [data-tooltip2], [data-tooltip3], [data-tooltip4]",
    content: function() {
      var element = $(this);
      if (element.is("[data-tooltip]")) {
        return "This is a small tooltip";
      }
      if (element.is("[data-tooltip2]")) {
        return tooltipText.innerHTML;
      }
      if (element.is("[data-tooltip3]")) {
        return tooltipText.innerHTML;
      }
      if (element.is("[data-tooltip4]")) {
        return tooltipText.innerHTML;
      }
    }
  });
});