BBcode Mouse Over Spoiler Tag

[bobster65]

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='#0000 00'">{param}</span>
Example: Stuff goes here
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]

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='#0000 00'">{param}</span>

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

[bobster65]

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='#0000 00'">{param}</span>

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

Cool addition :up: Thanks!

[rjmjr69]

I dont get it...

[Liberation]

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='#0000 00'">Stuff goes here</span>

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

[KevNJ]

Simple, easy install, very effective. Thanks!

[AzH]

ONly effective with black text though, isn't it? Won't work on dark styles as it is or if someone has an option of light and dark styles for their members.

[bobster65]

ONly effective with black text though, isn't it? Won't work on dark styles as it is or if someone has an option of light and dark styles for their members.

Just change the Black (#000000) and White (#FFFFFF) color codes to suit your needs.

[razmyth]

Just some additions I did to make this code more fun, also solves problems like bgcolours, text colours, skins, etc. Thought I'd share it cause I loved the original code this thread provided.

<table border bgcolor="yellow"><tr><td><font size= 3><font color="red"><b>Spoiler Alert: </b></font><font color="yellow"><span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#FFFF 00'">{param}</span></font></tr></table>

Then the css code

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

Results:
https://vborg.vbsupport.ru/external/2007/10/29.jpg

[Magnumutz]

Dude... remove that second picture, it's offensive.

[razmyth]

Hardly offensive but i won't argue, done

[repairman jack]

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

How do you add this icon to vBulletin?

[bobster65]

How do you add this icon to vBulletin?

upload the image to your images directory and then in the BB Code Manager, edit the spoiler BB Code and add the path to the image in the "Button Image (Optional)" area of the form.

[repairman jack]

upload the image to your images directory and then in the BB Code Manager, edit the spoiler BB Code and add the path to the image in the "Button Image (Optional)" area of the form.

Great. Thanks!

[Thelonius Beck]

This works well with 3.7 as well. Just so everyone is aware. ;)