Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Using a Span for Hover Info


Reply

5 Posts   1126 Views

Avatar
goodness

14 June 2013 at 4:17am (Last edited: 14 June 2013 5:34am), Community Member, 38 Posts

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!

Avatar
goodness

19 June 2013 at 12:42am Community Member, 38 Posts

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

Avatar
Harley

19 June 2013 at 3:30am Community Member, 153 Posts

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

Avatar
Devlin

19 June 2013 at 3:43am (Last edited: 19 June 2013 3:55am), Community Member, 215 Posts

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


http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#custom-data-attribute

--

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/

Avatar
goodness

19 June 2013 at 4:13am Community Member, 38 Posts

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!