I am fairly new to SilverStripe.

I am working within the CMS and trying to insert code via the HTML Editor.

If I uses the following, I get my hidden/hover content (inside the span) to appear on hover. HOWEVER, the default tooltip (yellow) box pops up shortly afterwards and over my nicely-styled box. (SEE ATTACHED IMAGE BELOW)

<span title="some content to pop up on hover">Copy That Is Hovered Over</span>

Here it the CSS (i have it in the typography.css file):

span:hover {
color: red;
position: relative;
}

span[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
width: 400px;
left: 0;
top: 100%;
/* white-space: nowrap;*/
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

I want to get the same results WITHOUT the default yellow tooltip box showing up.

If I change the code by replacing "title" with "info" it works fine in a stand-alone webpage:

<span info="some content to pop up on hover">Copy That Is Hovered Over</span>

Here it the CSS (i have it in the typography.css file):

span:hover {
color: red;
position: relative;
}

span[info]:hover:after {
content: attr(info);
padding: 4px 8px;
color: #333;
position: absolute;
width: 400px;
left: 0;
top: 100%;
/* white-space: nowrap;*/
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

HOWEVER, when I make this change inside the HTML Source Editor (inside the CMS) it takes the code out.
It will allow "title" but nothing else.

Can someone please tell me if this is possible? If yes, how?

Thanks!

Is it possible that nobody has any thoughts/advice on this?

I'm not entirely sure what you are trying to do here but html within the editor can be somewhat messy. I would suggest going down the route of short code handlers perhaps? That way in your editor you could do something like $yellowbox['content to appear in yellow box'] giving consistent html and less overhead for the author.

This should help http://www.balbuss.com/mini-introduction-to-shortcodes/

and this is a great post, completely different to what you are trying to achieve but you will get the idea http://www.ssbits.com/tutorials/2010/2-4-using-short-codes-to-embed-a-youtube-video/

Let us know how you get on

Regards

Hi there.

Unfortunately, there is no "info" attribute for the "span" element.
http://www.w3.org/wiki/HTML/Elements/span

--

Also, TinyMCE (the HTML editor) discards every attribute and element which is not defined in its config.
http://www.tinymce.com/wiki.php/Configuration:valid_elements

--

Try a html5 custom data-* attribute instead:

<span data-info="some content to pop up on hover">Copy That Is Hovered Over</span>

span[data-info]:hover:after { 
content: attr(data-info); 
padding: 4px 8px;
// ...

--

Normally I use jQueryUI's Tooltip plugin. It has a lot of features and allows you to use common "title" attributes for non-javascript and SEO purposes.
http://jqueryui.com/tooltip/

Thanks Devlin

<span data-info="some content to pop up on hover">Copy That Is Hovered Over</span>

span[data-info]:hover:after {
content: attr(data-info);
padding: 4px 8px;
// ...

That worked!