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

XF 1.3 BBCode usage & CSS failure.

Discussion in 'Styling and Customization Questions' started by Adam K M, Mar 27, 2014.

  1. Adam K M

    Adam K M Active Member


    I have currently created a tooltip bbcode, which like the name suggests, when you hover over the text, your tooltip pops up!!!

    Take a look at our jsfiddle page where we developed the code, or on the BBCode help page (The code is at the bottom, and works) for my forum, or on a post where it doesn't actually work

    The BBCode itself looks like:
    <span data-tooltip="{option}" class="tooltip-post">{text}</span>
    The CSS code on EXTRA.css looks like:
    ** Tooltip BBCode CSS
    .tooltip-post:hover {
        background-color: #f5ff87;
        border-radius: 3px;
    .tooltip-post {
        display: inline;
        position: relative;
        opacity: 0.8;
        text-decoration: none;
        margin: 0 -2px;
        padding: 0 2px;
        border-bottom: 1px dotted #888;
        border-radius: 3px;
    .tooltip-post:hover:after {
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: -5px;
        color: #fff;
        content: attr(data-tooltip);
        right: 115%;
        padding: 5px 5px;
        position: absolute;
        z-index: 98;
    .tooltip-post:hover:before {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid #333;
        content: "";
        left: -15%;
        bottom: 3px;
        position: absolute;
        z-index: 99;
    As you can see with the .tooltip-post:hover:after class, the tooltip is populated by data from the html attribute "data-tooltip". The "data-tooltip" attribute is set with the "{option}" of the BBcode... on the examples I give from my website, a quick inspect element will reveal that this field is indeed being set correctly.

    What's happening!
    It's all fun and games - if you look at the BBCode help page, you'll see that the tooltip content is loading effectively, and nicely. However, as soon as you go to the post, you'll notice that the tooltip is not appearing.
    With no apparent cause - I've tried setting the CSS content tag to a static value with the inspect element feature of chrome, works on the other instances of the BBCode, and does not seem to affect this instance at all.

    The data-tooltip field is set in the post and in the BBCode help page, so why is this not working!?!?!

    I am unable to find out any possible reason for the tooltip not showing up on the post page. Perhaps it's possible that the content is being overriden by something... but why, and how do I fix it???

    All help is greatly appreciated!
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Got an example post to demonstrate the problem?
    Adam K M likes this.
  3. Adam K M

    Adam K M Active Member

    The text with the BBCode applied is "a tool"... hovering over it shows the some of the css effects, but not the bubble. Again, you can go to the help page for BBCodes from that page and see how it actually does work.

    Thanks for the reply!!!!
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It actually works, but the tooltip is hidden due to overflow:

    Admin CP -> Appearance -> Templates -> message.css

    	.message .messageContent
    		@property "messageContent";
    		min-height: 100px;
    		overflow: hidden;
    		*zoom: 1;
    		@property "/messageContent";
    Adam K M likes this.
  5. Adam K M

    Adam K M Active Member

    Is there a !important overflow property I could apply to the tooltip to make it display? I'm not familiar with overflow...
    Last edited: Mar 29, 2014
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The overflow attribute is part of the parent message container, not the tooltip itself. I don't think you can override this in a child element.
    Adam K M likes this.
  7. Adam K M

    Adam K M Active Member

    Thanks! With some extra searching, I came up with this sub-container override (...Which doesn't appear to work...). Thank you so much Jake for pointing out what was going wrong! The best!!!

    Edit: The solution is simple, just tested with inspect element... move the tip above the text!!! Don't want to mess with anything that's established and working... for one small BBCode
    Last edited: Mar 29, 2014

Share This Page