How can I align a tooltip relative to the page or its container?

If I position a tooltip around links, links to the left of the page are OK, but hovering over links to the right causes the tooltip to run off the side of the page.

The links are in a <td> element of a table. How do I adapt this so that the tooltip appears centred on the page, or centred over a table <td> rather than aligned to the link?

.tooltip {
  position: relative;
  display: inline-block;
  color:#56e;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 400px;
  overflow: auto;
  background-color: white;
  color: #000;
  text-align: left;
  border-radius: 6px;
  -moz-box-shadow: 10px 10px 5px #bbb;
  -webkit-box-shadow: 10px 10px 5px #bbb;
  box-shadow: 10px 10px 5px #bbb;
  padding: 15px;
  display:block;

  /* Position the tooltip */
  position: absolute;
  z-index: 80;
  top: 20px;
  left: 20px;
}

.tooltip:hover > .tooltiptext {
  visibility: visible;
}

.tooltip .tthead {
  font-weight: bold;
}

<h2>How to center the tooltip text?</h2>
<p>The pop-up follows the hoverable text!</p>

<div class="tooltip">Hover here
  <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada ex in dignissim pretium. Fusce.</span>
</div>

Solution

Workable version which seems to be responsive too:

.tooltip {
  position: relative;
  display: inline-block;
  color:#56e;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 100px;
  overflow: auto;
  background-color: white;
  color: #000;
  text-align: left;
  border-radius: 6px;
  -moz-box-shadow: 10px 10px 5px #bbb;
  -webkit-box-shadow: 10px 10px 5px #bbb;
  box-shadow: 10px 10px 5px #bbb;
  padding: 15px;
  display:block;

  /* Position the tooltip */
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -5%);
  z-index: 80;
}

.tooltip:hover > .tooltiptext {
  visibility: visible;
}

.tooltip .tthead {
  font-weight: bold;
}

<h2>Centering the tooltip</h2>
<p>The pop-up is centered on the page</p>

<div class="tooltip">Hover here
  <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada ex in dignissim pretium. Fusce.</span>
</div>