Jump to:

22977 Posts in 11657 Topics by 2827 members

General Questions

SilverStripe Forums » General Questions » Using a Span for Hover Info

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

Page: 1
Go to End
Author Topic: 530 Views
  • goodness
    Avatar
    Community Member
    38 Posts

    Using a Span for Hover Info Link to this post

    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!

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: Using a Span for Hover Info Link to this post

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

  • Harley
    Avatar
    Community Member
    153 Posts

    Re: Using a Span for Hover Info Link to this post

    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

  • Devlin
    Avatar
    Community Member
    186 Posts

    Re: Using a Span for Hover Info Link to this post

    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/

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: Using a Span for Hover Info Link to this post

    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!

    530 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.