CSS property dependent of element position?

My goal is to show a styled tooltip in an HTML document.

Therefore I created this code:

.word-with-tooltip{
  position:relative;
 }
  
.tooltip{
  position:absolute;
  bottom:1.5em;
  right:0;
  height:100px;
  width:200px;
  display:none;
  border-style:solid;
  border-width:1px;
  border-color:gray;
  background-color:#dddddd;
  text-align:left;
 }

.word-with-tooltip:hover .tooltip{
  display:block;
 }

<div style="height:200px"></div>
  <div>
    <span class="word-with-tooltip">
      Left Car
      <div class="tooltip">A vehicle with four wheels</div>
    </span>
  </div>
  <div style="text-align:center;">
    <span class="word-with-tooltip">
    Centered Car
    <div class="tooltip">A vehicle with four wheels</div>
    </span>
  </div>
<div style="text-align:right;">
  <span class="word-with-tooltip">
    Right Car
    <div class="tooltip">A vehicle with four wheels</div>
  </span>
</div>
<div style="height:200px"></div>

Rudimentary this does what it should do: when hovering a word with the mouse, the browser shows a formatted tooltip:

Unfortunately the tooltip is cut off when it is too far at the left:

A solution would be to set the CSS property left instead of right in dependence of where the word with the tooltip is positioned. The position can vary because it can be anywhere in a large text.

Question: Is it possible (and how) to …

set CSS property left:0 if the word is positioned at the left half of the screen?
set CSS property right:0 if the word is positioned at the right half of the screen?
set CSS property top:1em if the word is positioned at the upper half of the screen?
set CSS property bottom:1em if the word is positioned at the lower half of the screen?

Answer

Just add some JS:

document.querySelectorAll(".word-with-tooltip").forEach(word => {
  word.addEventListener('mouseover', e => {
    const tooltip = e.target.children[0]
    if (!tooltip) return;
    tooltip.style.cssText = `
      ${( e.clientX * 100 ) / window.innerWidth < 50 ? 'left' : 'right' }: 0;
      ${( e.clientY * 100 ) / window.innerHeight < 50 ? 'top' : 'bottom' }: 1em;
    `
  })
})

.word-with-tooltip {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 1.5em;
  right: 0;
  height: 100px;
  width: 200px;
  display: none;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  background-color: #dddddd;
  text-align: left;
}

.word-with-tooltip:hover .tooltip {
  display: block;
}

<div style="height:200px"></div>
<div>
  <span class="word-with-tooltip">
      Left Car
      <div class="tooltip">A vehicle with four wheels</div>
    </span>
</div>
<div style="text-align:center;">
  <span class="word-with-tooltip">
    Centered Car
    <div class="tooltip">A vehicle with four wheels</div>
    </span>
</div>
<div style="text-align:right;">
  <span class="word-with-tooltip">
    Right Car
    <div class="tooltip">A vehicle with four wheels</div>
  </span>
</div>
<div style="height:200px"></div>

Advertisement

Answer