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:
The CSS code on EXTRA.css looks like:
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!
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!