Forum:Tooltips/rollover boxes! Links provided. PLEASE HELP! (Desperate)

I have searched far and wide, and my lack of any CSS skill has not helped, either! I am so desperate!

I run Merlin Wiki. I'm behind the implementation of the visual elements, and I did the work on those featured boxes you see on the page. But I'd like to take it further!

I was super jealous when I saw the "Tooltips" template this site has. Take a look with your own eyes: http://sacredseasons2.wikia.com/wiki/Areas

Rollover "portal types" and bingo! That is so awesome!

I've searched forums far and wide and tried some CSS/.js stuff myself, but I can't get it working! Hopeless, I know! I've browsed the other 'tooltips' topics on the forum but to no avail.

If you could give me a kickstart.. start me off.. put me in the right direction.. be clear and concise, what do I need to do to get this on Merlin Wiki? Of course I'll want the colour altered to fit in with my Wiki (a dark brown colour with white text).

Please don't tell me "just paste this into here, blah, blah", what will I need to do to implement it onto a page in the first place?

THANK YOU!!!


 * You could have just asked one of the SS2 Wiki bureaucrats ;-)


 * The Dungeons of Dredmor Wiki uses the same solution, but it's easier to comprehend there. First you need to copy/paste certain CSS styles from their MediaWiki:Wikia.css to MediaWiki:Wikia.css on your wiki. The code to paste is:

 /********************************************************************************************/ /* CSS Tooltips */ .tooltip { border-bottom: 1px dotted #A47719; color: #A47719; cursor: help; position: relative; } .tooltip span { margin-left: -999em; position: absolute; } .tooltip:hover span { padding: 4px; color: #ffffff; position: absolute; top: -2.5em; z-index: 99; margin-left: -1em; width: 350px; } .classic { padding: 0.2em 0.2em; } .classic {background: #000000 !important; } /* End of CSS Tooltips */ /********************************************************************************************/
 * html a:hover { background: transparent; }


 * After refreshing your MediaWiki:Wikia.css follwing the instructions on top of the page, the tooltips should be functional and you should be able to use them by adding:

 CAPTION HOVER TEXT
 * on any page on the wiki you want. I hope this is an straightforward explanation. Also, the colors and and some other styles in the CSS code are free to customize, so they look good on your wiki. — Sovq 15:46, April 11, 2012 (UTC)


 * Ummm... Dungeons of Dredmor Wiki looks to use an ajaxttlink JS and not a mostly CSS tooltip solution. Just FYI. -- Fandyllic (talk &middot; contr) 11 Apr 2012 4:01 PM Pacific


 * The DoD Wiki uses both actually. I should have been more clear as to where can the CSS tooltips be found. Both can be seen and compared on my user page there. — Sovq 16:21, April 12, 2012 (UTC)