Is there a CSS property that is determined by the position of an element

Question

Is there a CSS property that is determined by the position of an element

My objective is to display a styled tooltip in an HTML document.

To achieve this, I have written the following 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>

Essentially, this code functions as intended by displaying a nicely formatted tooltip when hovering over a word with the mouse: https://i.sstatic.net/LMDjk.png

However, there is an issue where the tooltip gets cut off when it's positioned too far to the left:

https://i.sstatic.net/lbIPn.png

A potential solution would be to adjust the CSS property from right to left based on the location of the tooltip relative to the screen. Since the position of the tooltip can vary within a large text, this adjustment is necessary for proper display.

Inquiry: Is it feasible (and how) to ...

set the CSS property left:0 if the word is located in the left half of the screen?
set the CSS property right:0 if the word is placed in the right half of the screen?
set the CSS property top:1em if the word is situated in the upper half of the screen?
set the CSS property bottom:1em if the word is found in the lower half of the screen?

javascript html css

Answer 1

Answer №1

Implement JS for interactive tooltips:

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">
      Blueberry Fruit
      <div class="tooltip">A small, round fruit with a sweet flavor.</div>
    </span>
</div>
<div style="text-align:center;">
  <span class="word-with-tooltip">
    Mango Fruit
    <div class="tooltip">A tropical fruit with a juicy pulp.</div>
    </span>
</div>
<div style="text-align:right;">
  <span class="word-with-tooltip">
    Kiwi Fruit
    <div class="tooltip">A fuzzy brown fruit with a green interior.</div>
  </span>
</div>
<div style="height:200px"></div>

Answer 2

Implement JS for interactive tooltips:

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">
      Blueberry Fruit
      <div class="tooltip">A small, round fruit with a sweet flavor.</div>
    </span>
</div>
<div style="text-align:center;">
  <span class="word-with-tooltip">
    Mango Fruit
    <div class="tooltip">A tropical fruit with a juicy pulp.</div>
    </span>
</div>
<div style="text-align:right;">
  <span class="word-with-tooltip">
    Kiwi Fruit
    <div class="tooltip">A fuzzy brown fruit with a green interior.</div>
  </span>
</div>
<div style="height:200px"></div>

Answer 3

Answer №2

Here's a unique solution I discovered: I implemented the following styles:

.word-with-tooltip.left .tooltip{left:0;}
.word-with-tooltip.right .tooltip{right:0;}

These styles were then assigned dynamically within an onmouseover event handler. The code for this implementation is as follows (the content of the onmouseover attribute has been broken down for easier readability):

<div>
<span class="word-with-tooltip"
onmouseover="
this.classList.remove('left');
this.classList.remove('right');
if(event.clientX<window.innerWidth/2){
    this.classList.add('left');
} else {
   this.classList.add('right');
}">
Left Car
<div class="tooltip">A vehicle with four wheels</div>
</span>
</div>

Answer 4

Here's a unique solution I discovered: I implemented the following styles:

.word-with-tooltip.left .tooltip{left:0;}
.word-with-tooltip.right .tooltip{right:0;}

These styles were then assigned dynamically within an onmouseover event handler. The code for this implementation is as follows (the content of the onmouseover attribute has been broken down for easier readability):

<div>
<span class="word-with-tooltip"
onmouseover="
this.classList.remove('left');
this.classList.remove('right');
if(event.clientX<window.innerWidth/2){
    this.classList.add('left');
} else {
   this.classList.add('right');
}">
Left Car
<div class="tooltip">A vehicle with four wheels</div>
</span>
</div>

Is there a CSS property that is determined by the position of an element

Answer №1

Answer №2

Similar questions

Accessing JSON data frequently, even when using an invalid key

Leveraging the post method in Ajax along with a Perl script and passing parameters

Can CSS Variables be changed globally using jQuery?

The elements in the navigation bar stay in view for a short period of time even after the collapsible navbar has been

The Vue.js @click event does not function properly when used in a selection on mobile

Invalid Data Pusher for User Information in Next JS

What could be causing the delay in Express when transitioning between console logs while using AngularJS $http.get?

Tips for utilizing navigator.getDisplayMedia with automatic screen selection:

Is it possible to utilize JavaScript for transmitting and storing data on a server?

What is the best way to transform an array of lists into a neatly organized state?

iOS is not recognizing the <a> tag but is instead honoring the :hover property

After refreshing, the base href in the environment is characterized as undefined

Step-by-step guide: Deploying your app to Heroku with Babel and ES6 support

In Angular.js, there is a limitation with ng-keyup where event.preventDefault() cannot be utilized, and ng-keypress may have delays when updating the value for an

The footer seems to be malfunctioning

Caution in React: Utilizing functions with Object.assign() may not be a valid approach when dealing with React children

The jQuery ajax function is failing to return any results

Limit certain characters within special characters

Is my website broken due to Internet Explorer?

Incorporating various language URLs in Next.js using next-i18n-next functionality