All geek questions in one place

Show div on pair inside window edges

I want to show a div with a table and a lot of information inside. My problem is that it depends on where the hover element is, the information goes beyond the browser window. I need this to not happen, but I do not know how to fix it. What's the solution? be able to be with CSS, although if this is not possible, it also serves me 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>
Run codeHide result
+4
source share
1 answer

You can use jQuery-UI.

Its tooltip is smart and will fit on the page wherever it is.

For a demonstration, I gave tips to all four corners of the window.

  • You can choose a tooltip to appear using

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

    (you can also use classes, identifiers, etc.)

  • , ,

    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>
Hide result
+2

Source: https://habr.com/ru/post/1695092/

More articles:


All Articles