Hover text in text paragraph

  • 1
  • Question
  • Updated 10 years ago
  • Answered
How can I create a hover text within a text paragraph? I however don't want to link it to another page.
Photo of Anita

Anita

  • 4 Posts
  • 0 Reply Likes

Posted 10 years ago

  • 1
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hello Anita,

The link is not a problem.

May I ask if you want all of the text in the para to be hovered or single or a few joined words?

There appears to be alternative methods for different objectives
Photo of Anita

Anita

  • 4 Posts
  • 0 Reply Likes
Hi Peter,
I just would like to highlight a few words in the text and then add a hover text to that.
Photo of Cosmic Sensorium

Cosmic Sensorium

  • 102 Posts
  • 5 Reply Likes
Anita - seems like a title tag might work for you. To see what it looks like, mouse over the highlighted text below


this is regular paragraph text this is highlighted text this is regular text as well.



and to do it, just substitute your text using the code below:
<!--- this is regular paragraph text <a title="this is hovering text">this is highlighted text</a> this is regular text as well. --->

you don't need to copy the <!--- and --->.

you can also do a modular pop up. you can see an example at my homepage: http://cosmicsensorium.com. If you mouse over the link for "Privacy Policy" in my mailing list sign up box, you'll see a modular pop up with a block of text that stays open as long as your mouse is over the highlighted text. If you'd like the modular popup, let me know and I'll post the code!
Photo of Anita

Anita

  • 4 Posts
  • 0 Reply Likes
Thank you for your quick answer. This is great. Have already tried it. If you don't mind I would still love to have the modular code as well. Thanks a lot
Photo of Cosmic Sensorium

Cosmic Sensorium

  • 102 Posts
  • 5 Reply Likes
this is where i got the code from:
http://www.calcaria.net/javascript/20...
it has a brief explanation on there. i think somebody had posted it here on another thread.

i played around with it to change the colors, the size, etc. something important in regards to the placing of the modular pop up within the page:

hp.style.top = hoveritem.offsetTop + 1140 + 'px';
hp.style.left = hoveritem.offsetLeft + 400 + 'px';

note that i added + 'px' at the end of both strings. without this, it's a lot harder to place the pop up where you want it on the page. hope this is useful!