Always have a 'pop-up' appear just next to the link in question when a mouse over?

I have no idea how to get a ‘pop up’ with only text, right next to the text link in question.
Sometimes such a text link can be at the very top, bottom, left or right.
The best thing would be if the ‘pop up’ automatically adjusted to the available space by means of a CSS style element, but I am probably asking too much.

So far I have the following:

 <p>
      Ten teken, dat wij ook voor absolute beginners toegankelijk 
      willen zijn, vermijden wij jargon en wordt gepoogd om voortdurend 
      Nederlands te gebruiken waar dat mogelijk en redelijk is, want 
      wat mankeert er aan onze 
      <section id="sec1">
        <div id="div1">
          <p id="p1" class="ppup">
            <a class="keyword" id="k1">
              moerstaal
            </a>
            <span>
              Dit is de 'pop up'-tekst.
            </span>
          </p>
            </span>
          </p>
        </div>
      <section>?
  
       <br>Waar het gebruik van Nederlandse begrippen niet voor de hand ligt (zoals bij 'browser') of niet mogelijk is, zijn die begrippen tussen enkele aanhalingstekens geplaatst.
    </p>p.ppup:hover {text-decoration: none; /*background: #ffffcc;*/ z-index: 6; }
p.ppup span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
p.ppup:hover span {left: 2%; /*background: #ffffff;*/} 

p.ppup span {
  border-color: #28477a;
  border-radius: .5em; /* Afgeronde hoeken */
  border-style: solid;
  border-width: 1px;
  left: -9999px;
  margin: 4px 0 0 0px; 
  padding: .2em .5em .3em .5em;
  position: absolute;
} 
  
p.ppup:hover span {
  background: #ffffcc; /* Achtergrondkleur = zachtgeel */
  margin: auto;
  z-index: 6;
}
1 Like

You need to set position:relative on the link and then absolutely place the tooltip in relation to that link.

Your html is all invalid and makes no sense so I hev corrected it into a normal structure to show the method.

That will show the tooltip under and start at the left of the word (or phrase that triggers the tooltip) wherever that word/phrase is in the text.

It will not however move the tooltip if it is outside the viewport (as could happen if it was the last word on a long line). In those cases you would need js or use the anchor positioning module which is now available in Chrome.

The basics would be like this (Chrome only for now but there are polyfills if needed):

Note how if the tooltip is at the right of the viewport it automatically moves underneath.

1 Like

Great solution! :smiley:
I’m still stuck with 1 thing. The pop up is wider than the window so the right part of the text is not readable. I’ve tried everything with margin-right, but I can’t figure it out.

:slight_smile: Gebruik alstublieft Engels, want dit is een Engelstalig forum. Gebruik Google Translate of iets dergelijks om uw vragen te stellen.*
Please use English as this is an English language forum . Use Google translate or similar to ask your questions. I have translated your answer

That won’t happen in my second solution unless you have set a fixed width that is wider than the viewport.

I suggest that you use codepen (its free) to show the code you are using and to make it easier for us to help you.:slight_smile:

Thank you so much for the detailed information. I was looking for it and finally got it from here.

I am withdrawing because people want me to respond in English, which is too difficult for me (I created this text via DeepL). Because I was shown this forum in Dutch (I am Dutch), I had no idea that writing in Dutch would be a problem.

Sorry you feel that way but it is clearly marked in the FAQ section that you should have read before posting.

The official language here is English and all communications should be in English please. That’s not because we don’t respect other languages, but because it’s the only language we all understand!

These days google translate (and others) are pretty easy for you to use so if you still want help then its up to you to make the effort so that we can help you.:slight_smile:

4 Likes