Creating a tooltip that doesn't rely on any child elements

Question

Creating a tooltip that doesn't rely on any child elements

I've been experimenting with creating a tooltip that appears when hovering over an <a> tag and displays a <div> from another location

For example:

<p>
blah blah <a class="tooltiphover">hover me</a> blah blah
</p>

<div class="tooltip">
<!-- tooltip info code goes here -->
</div>

However, all the tutorials and resources I have come across focus on using child elements which can clutter the code or require the use of extra <div> tags that may disrupt the visual appearance of the site

Another common approach is exemplified by:

<div class="tooltiphover">Hover me</div>
    <span class="tooltip">Tooltip stuff</span>
</div>

This becomes problematic especially when dealing with CSS selectors like .tooltiphover:hover .tooltip.

Is there a way in CSS to style both elements simultaneously without one being a child of the other? Using a comma or plus sign doesn't seem to achieve the desired effect.

Thank you for your help.

EDIT: To simplify, how can I make the div display in front of everything and beside the <a> tag like a proper tooltip? I might resort to using JavaScript for handling the mouseover event. It seems easier than struggling with CSS and HTML due to the confusing array of tooltip tutorials available online 😅

What would be the appropriate CSS code for achieving this?

javascript html css tooltip

Answer 1

Answer №1

There are numerous methods to achieve this without specifically needing a <div> tag. CSS offers a variety of selectors with distinct behavior rules. In general, CSS cascades and interacts in a forward manner, making it challenging to affect elements that come before in the document hierarchy (e.g., a child dictating behavior to its parent is uncommon.)

The most commonly used selectors for this task are either the element element selector or the element > element selector. These selectors require the target element to be a child of the parent element.

Here is an example:

div:hover > h2{
  display:block;
}

h2{
  display:none;
}

<div>hover me
<h2>i am revealed</h2>
</div>

<p>don't hover me</p>

However, as previously mentioned, these selectors create a tightly coupled relationship between the selected element and its parent. This is where the element ~ element selector becomes useful.

div:hover ~ h2{
  display:block;
}

h2{
  display:none;
}

<div>hover me</div>

<p>don't hover me</p>

<h2>i am revealed</h2>

While element > element necessitates a vertical relationship between the parent and child, element ~ element calls for a horizontal sibling relationship. Essentially, all elements meeting your selection criteria will be revealed as long as they are siblings within the same context.

But what if your desired target is not a direct sibling but a child of a sibling?

div:hover ~ h2{
  display:block;
}

h2{
  display:none;
}

<div>hover me</div>

<p>don't hover me</p>

<article>
  <h2>i am revealed</h2>
</article>

In this case, the previous approach fails because the elements are no longer direct siblings within the same context. There are various solutions to address this issue, both broad and specific, but one straightforward method is as follows:

div:hover ~ * h2{
  display:block;
}

h2{
  display:none;
}

<div>hover me</div>

<p>don't hover me</p>

<article>
  <h2>i am revealed</h2>
<article>

By combining the element ~ element selector with the * element selector, we can target any h2 element that is a child of any sibling to our original selector using the :hover pseudo-class.

If I understand correctly, and you wish for both the hover-triggering element and its target to change when hovered over, you simply need to define their respective styles separately.

div:hover ~ * h2{
  display:block;
}

div:hover{
  color: red;
}

h2{
  display:none;
}

<div>hover me and I turn red</div>

<p>don't hover me</p>

<article>
  <h2>i am revealed and not red</h2>
<article>

Answer 2

There are numerous methods to achieve this without specifically needing a <div> tag. CSS offers a variety of selectors with distinct behavior rules. In general, CSS cascades and interacts in a forward manner, making it challenging to affect elements that come before in the document hierarchy (e.g., a child dictating behavior to its parent is uncommon.)

The most commonly used selectors for this task are either the element element selector or the element > element selector. These selectors require the target element to be a child of the parent element.

Here is an example:

div:hover > h2{
  display:block;
}

h2{
  display:none;
}

<div>hover me
<h2>i am revealed</h2>
</div>

<p>don't hover me</p>

However, as previously mentioned, these selectors create a tightly coupled relationship between the selected element and its parent. This is where the element ~ element selector becomes useful.

div:hover ~ h2{
  display:block;
}

h2{
  display:none;
}

<div>hover me</div>

<p>don't hover me</p>

<h2>i am revealed</h2>

While element > element necessitates a vertical relationship between the parent and child, element ~ element calls for a horizontal sibling relationship. Essentially, all elements meeting your selection criteria will be revealed as long as they are siblings within the same context.

But what if your desired target is not a direct sibling but a child of a sibling?

div:hover ~ h2{
  display:block;
}

h2{
  display:none;
}

<div>hover me</div>

<p>don't hover me</p>

<article>
  <h2>i am revealed</h2>
</article>

In this case, the previous approach fails because the elements are no longer direct siblings within the same context. There are various solutions to address this issue, both broad and specific, but one straightforward method is as follows:

div:hover ~ * h2{
  display:block;
}

h2{
  display:none;
}

<div>hover me</div>

<p>don't hover me</p>

<article>
  <h2>i am revealed</h2>
<article>

By combining the element ~ element selector with the * element selector, we can target any h2 element that is a child of any sibling to our original selector using the :hover pseudo-class.

If I understand correctly, and you wish for both the hover-triggering element and its target to change when hovered over, you simply need to define their respective styles separately.

div:hover ~ * h2{
  display:block;
}

div:hover{
  color: red;
}

h2{
  display:none;
}

<div>hover me and I turn red</div>

<p>don't hover me</p>

<article>
  <h2>i am revealed and not red</h2>
<article>

Creating a tooltip that doesn't rely on any child elements

Answer №1

Similar questions

Place the "Close" button outside of the div container

Establishing an index for a kendo ui dropdownlist component post-ajax operation

An Illustrative Example of Inheritance in Javascript?

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

Displaying a dynamic progress bar across all elements in fullscreen mode

The Language Switcher is not displaying the new language setting

Error message: The AJAX POST request using jQuery did not return the expected data, as the data variable could not be

Automatically populate a dropdown list based on the selection made in another dropdown menu

Unresponsive radio buttons in React failing to display as checked

Looking to optimize the JavaScript code for improved performance speed

Jquery Banner Fade In animation malfunctioning

Struggling to establish a functioning proxy in my React and Node application

A guide on retrieving specific data from a dynamic table in a React application

How can I create an HTML custom upload button that changes to a hand cursor when hovered

Modify the value of select options when the page is first loaded

Displaying a collection of nested objects in AngularRendering a group

Creating a dynamic multi-choice dropdown list with Django and Vue.js

Is it necessary to install only form control styles from Bootstrap 4?

Functionalities of HTML controls

In the event that conflicting media queries take precedence over one another