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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

Using a Span for Hover Info


Go to End


5 Posts   3590 Views

Avatar
goodness

Community Member, 38 Posts

14 June 2013 at 4:17am

Edited: 14/06/2013 5:34am

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

Community Member, 38 Posts

19 June 2013 at 12:42am

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

Avatar
Harley

Community Member, 165 Posts

19 June 2013 at 3:30am

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

Community Member, 344 Posts

19 June 2013 at 3:43am

Edited: 19/06/2013 3:55am

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

Community Member, 38 Posts

19 June 2013 at 4:13am

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!