The Arcive of vBulletin Modifications Site.

BBcode Mouse Over Spoiler Tag · **Released**: 08-07-2007

Im not a huge fan of all the spoiler tags that require buttons to activate the hidden text, nor can they be used within a paragraph of text multiple times, so I wrote one that you can place the tags around the text within a paragraph (multiple times if you wish) and all one has to do is MOUSE OVER each one to reviel the hidden text. The reason I say "each one" is that you can have a review with multiple spoiler tags within the review and each one is activated seperately upon mouse over.

2 Simple Steps

Step 1 - Add new BB Code as follows:

Title: Spoiler
Tag: spoiler
Replacement:

Code:

<span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">{param}</span>

Example:

Code:

[spoiler]Stuff goes here[/spoiler]

Description: The spoiler tag will hide the text between the tags, and will appear only when you put your mouse over the hidden text.

Step 2 - Add an Additional CSS Definition

Edit the Style(s) that you wish to apply this too .... (Style Manager >> All Style Options) scroll down towards the very bottom of the Options and you will see an area for "Additional CSS Definitions " Enter the below code to the end of the Additional CSS Definitions

Code:

.spoiler
{
color: #000000;
text-decoration: none;
background-color: #000000;
}

Thats all there is too it.

Feckie (Roger) · #2 08-07-2007, 09:27 PM

Nice One

bobster65 · #3 08-08-2007, 12:03 PM

Quote:

Originally Posted by Feckie (Roger)

Nice One

Thanks.. my members love it.

Liberation · #4 08-09-2007, 08:23 AM

Could make the replacement as it is shown below, to give users more warning.
I know people can just add this if they want, but it might make life easier for some users.

Code:

<font color="#FF0000"><b>Warning! Spoiler Below:</b></font><br><span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">{param}</span>

So you get the result of Warning! Spoiler Below: above your spoiler.

bobster65 · #5 08-09-2007, 10:45 AM

Quote:

Originally Posted by Liberation

Could make the replacement as it is shown below, to give users more warning.
I know people can just add this if they want, but it might make life easier for some users.

Code:

<font color="#FF0000"><b>Warning! Spoiler Below:</b></font><br><span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">{param}</span>

So you get the result of Warning! Spoiler Below: above your spoiler.

Cool addition :up: Thanks!

rjmjr69 · #6 08-10-2007, 03:00 AM

I dont get it...

Liberation · #7 08-11-2007, 09:37 AM

Quote:

Originally Posted by bobster65

Cool addition :up: Thanks!

No problem,

David Copeland · #8 08-23-2007, 02:32 PM

Great job! Worked smooth!

HeRmAn'S · #9 08-25-2007, 02:17 PM

bobster65 install:up:

Trillian · #10 08-25-2007, 02:21 PM

Thanks for doing this. I prefer this mouse-over method to the other clicking and dragging ones.

Following on Liberation's suggestion, I've edited my Replacement text to remove the line break so I could embed multiple Spoiler tags in one paragraph, yet still alert the user to a Spoiler. It looks like this:

[Spoiler:] and spoiler stuff to follow on the same line.

Code:

<b>[<i>Spoiler:</i>]</b> <span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">Stuff goes here</span>

I've also attached an optional Icon to use with the Spoiler Tag.