How to make a tooltip without needing any child elements-CodePudding

I've been trying to make a tooltip that activates upon hovering an <a> tag and displays a <div> from another place

Example:

<p>
blah blah <a >hover me</a> blah blah
</p>

<div >
<!-- tooltip info code goes here -->
</div>

But every tutorial and site I've stumbled upon has been adamant on using child elements and biggest problem with that is it makes the code look bad or forces me to use a <div> tag which then screws up the look of the site

Example:

<div >Hover me</div>
    <span >Tooltip stuff</span>
</div>

Especially when it comes to their css with .tooltiphover:hover .tooltip.

Also if there is any way to call for both elements in css to be modified when one is hovered, without being a child element, that would be great as well because adding a comma doesn't seem to do the trick and neither does adding a plus

Thanks.

CodePudding user response：

There are multiple ways to accomplish this, and note that none specifically require a <div> tag. CSS has many different types of selectors with different rules for how each behave. Generally speaking, CSS cascades and interacts forwards, meaning it can be difficult to interact with elements prior in your document (i.e. a child telling its parent how to behave is rare.)

The most common type of selector for this is either the element element selector or the element > element selector. They require the affected/target element be a child of the parent element.

They look something like this.

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 you said, this requires a highly coupled relationship between the element you are selecting for and its parent. This is where the element ~ element selector comes into play.

div:hover ~ h2{
  display:block;
}

h2{
  display:none;
}

<div>hover me</div>

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

<h2>i am revealed</h2>

Where element > element requires a vertical relationship between your parent and child, element ~ element requires a horizontal sibling relationship. In the example given, all elements matching your selection would be revealed so long as they are siblings within the same context.

But what would happen if your desired target was a child of a sibling, rather than the sibling itself?

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>

Oh no! It doesn't work now, because they are no longer siblings within the same context. There are many ways to solve this issue, both general and specific, but one simple way 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 interact with any h2 that is a child of any sibling of our original selector with the :hover pseudo-class.

If I am understanding the second part of your question correctly, and you want both the hover element AND its target to change in some way when the hover event takes place, it's as simple as separately declaring the styles.

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>

CodePudding user response：

.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 the tooltip */
  position: absolute;
  z-index: 1;
}

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

<p>Move the mouse over the text below:</p>

<div >Hover over me
  <span >Tooltip text</span>
</div>