Miscellaneous Hacks - BBcode Mouse Over Spoiler Tag

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:

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

Example:

[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

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

Thats all there is too it.

[Feckie (Roger)]

Nice One

[bobster65]

Originally Posted by Feckie (Roger)

Nice One

Thanks.. my members love it.

[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.

<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]

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.

<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]

I dont get it...

[Liberation]

Originally Posted by bobster65

Cool addition :up: Thanks!

No problem,

[David Copeland]

Great job! Worked smooth!

[HeRmAn'S]

bobster65 install:up:

[Trillian]

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.

<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.