title: How to make a tooltip without needing any child elements
body: <p>I've been trying to make a tooltip that activates upon hovering an <code>&lt;a&gt;</code> tag and displays a <code>&lt;div&gt;</code> from another place</p>
  <p>Example:</p>
  <pre><code>&lt;p&gt;
  blah blah &lt;a class=&quot;tooltiphover&quot;&gt;hover me&lt;/a&gt; blah blah
  &lt;/p&gt;
  
  &lt;div class=&quot;tooltip&quot;&gt;
  &lt;!-- tooltip info code goes here --&gt;
  &lt;/div&gt;
  </code></pre>
  <p>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 <code>&lt;div&gt;</code> tag which then screws up the look of the site</p>
  <p>Example:</p>
  <pre><code>&lt;div class=&quot;tooltiphover&quot;&gt;Hover me&lt;/div&gt;
      &lt;span class=&quot;tooltip&quot;&gt;Tooltip stuff&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Especially when it comes to their css with <code>.tooltiphover:hover .tooltip</code>.</p>
  <p>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</p>
  <p>Thanks.</p>
  <p>EDIT: Actually, to make it simpler, how would I make the div appear in front of everything and appear next to the <code>&lt;a&gt;</code> tag like a proper tooltip because I might just use JS to deal with the <code>mouseover</code> event. To be honest, not sure why I went through the effort of trying to use CSS and HTML for this when it is a lot easier with JS, but I think it was probably due to all the tooltip tutorials I searched up confused me too much </p>
  <p>What would be the CSS code for that?</p>