1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Tooltips on userBanner images

Discussion in 'Styling and Customization Questions' started by chickenputty, Mar 2, 2014.

  1. chickenputty

    chickenputty Member

    Overview: I'm trying to apply tooltips to userBanners which are purely images.
    Site w/ banners: http://mcbrawl.com/threads/10860/

    I'm styling user banners to be only images like so,
    .userBanner_creative {
    background: url("http://i.imgur.com/mrJThXa.png") no-repeat;
    height: 16px;
    width: 16px;
    text-indent: -10000em;
    display: inline-block;
    (Hotlinking is just temp)

    However, I'm also trying to add a tooltip when you hover over the image using,
        display: inline;
        position: relative;
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: 26px;
        color: #fff;
        content: attr(title);
        left: 20%;
        padding: 5px 15px;
        position: absolute;
        z-index: 98;
        width: 100px;
        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;
    I've accomplished this on the banner style "Creative Manager" by making the user banner text:
    <a title="Creative Manager" class="tooltip"><font color="#000">Creative Manager</font></a>

    But, I cannot think of how I would tooltip the image though because the banner text is removed and I need to apply the tooltip css to the background image.
    Could anyone help me out with this?
    jamalfree likes this.

Share This Page