CODEWITHSUNDEEP
htmlcsshover
Norak
Norak

Reputation: 413

Show div on hover inside the edges of the window

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 located, the information goes outside the limits of the browser window. I need this to not happen but I don't know how to fix it. What's the solution? to be able to be with CSS, although if it's 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>

Upvotes: 5

Views: 1060

Answers (1)

Steve Padmore
Steve Padmore

Reputation: 1740

You can use jQuery-UI.

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

For a demo I've given tooltips to all four corners of the window.

  • You can select what will have a tooltip appear via

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

    (you could also use classes, ids, etc.)

  • You can check which item is currently being hovered over via

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

  • And you can decide what will appear for each item via

    return "This is a small tooltip"; or return tooltipText.innerHTML; etc.

I placed your tooltip display inside a hidden div. That way it is not visible on screen, but the innerHTML can be retrieved and shown.

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

And here is the code:

$(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>

Upvotes: 2

Related Questions