Inline Hover Tips

Posted by GoVegan on 27 Aug 2009 05:51, last edited by Helmut_pdorf on 02 Jul 2012 09:10

Tags: css hover inline tip

rating: +10+x

This small piece of CSSCascading Style Sheets allows you to easily do inline text-hover comments. The beauty of this is that you only need to use a single CSS class to get it going.

CSS Code

On the page that you want to apply the Hover tip, just paste the following code:

[[module CSS]]
@import url(http://community.wdfiles.com/local--code/howto:inline-hover-tips);
[[/module]]

Syntax

To make use of this fantastically wonderfulWonderful adjective
A thing of delight, such as Wikidot. CSS trick, use the following code:

To make use of this [[span class="hover"]]fantastically wonderful[[span]]**Wonderful** adjective
A thing of delight, such as Wikidot.[[/span]][[/span]] CSS trick, use the following code:

Or alternatively, you can use which pushes the hover tip to the start of the link, rather than after it.this code instead. It can be more confusing to read the code, though:

Or alternatively, you can use [[span class="hover"]][[span]]which pushes the hover tip to the start of the link, rather than after it.[[/span]]this code instead[[/span]]. It can be more confusing to read the code, though:

Limitations

You can't use paragraphs within the inline hover tip. You can use single line breaks, however, by using GoonGoon's force line break trick.
If you find paragraphs are necessary for your hover popups, please check out this HowTo:popup.

Related articles

Author

James KanjoJames Kanjo. Please visit his/her userPage.

Add a New Comment

Related articles

Comments

Add a New Comment
csshoverinlinetip
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.