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

我想展示一个带有表格和大量信息的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>

你可以使用 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/

这是代码：

$(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;
      }
    }
  });
});

.tooltipTable {
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
}

<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div data-tooltip style="position: absolute; top: 0; left: 0;">
    <h2>Hover over me</h2>
  </div>
  <div data-tooltip2 style="position: absolute; top: 0; right: 0;">
    <h2>Hover over me too</h2>
  </div>
  <div data-tooltip3 style="position: absolute; bottom: 0; left: 0;">
    <h2>And me</h2>
  </div>
  <div data-tooltip4 style="position: absolute; bottom: 0; right: 0;">
    <h2>Don't forget me</h2>
  </div>
  <div class="tooltiptext" id="tooltiptext" style="display: none;">
    <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>
</body>

相关内容

最新更新

热门标签：