XF 1.3 BBCode usage & CSS failure.

[Adam K M]

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:

<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!

 

[Jake Bunce]

Got an example post to demonstrate the problem?

 

[Adam K M]

Got an example post to demonstrate the problem?

Spoiler: Link to example post

http://forums.shortcutcentral.org/threads/system-update.657/#post-4272

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!!!!

 

[Jake Bunce]

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]

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";
    }

Is there a !important overflow property I could apply to the tooltip to make it display? I'm not familiar with overflow...

 

[Jake Bunce]

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]

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