XF 1.3 BBCode usage & CSS failure.

Adam K M

Active member
Hello!

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:
HTML:
<span data-tooltip="{option}" class="tooltip-post">{text}</span>

The CSS code on EXTRA.css looks like:
Code:
** 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!
 
It actually works, but the tooltip is hidden due to overflow:

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

Rich (BB code):
	.message .messageContent
	{
		@property "messageContent";
		min-height: 100px;
		overflow: hidden;
		*zoom: 1;
		@property "/messageContent";
	}
 
It actually works, but the tooltip is hidden due to overflow:

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

Rich (BB code):
    .message .messageContent
    {
        @property "messageContent";
        min-height: 100px;
        overflow: hidden;
        *zoom: 1;
        @property "/messageContent";
    }

Is there a !important overflow property I could apply to the tooltip to make it display? I'm not familiar with overflow...
 
Last edited:
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.
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:
Back
Top Bottom