Plugin Author
ItayXD
(@itayxd)
Instead of helping you fix the style I’ll teach you a very useful trick.
Hit F12 and get your developer tools up (it’s OK we all use it not just beginners; it has very useful tools, though I’d like to note I prefer FireBug), go to the console and enter the following:
jQuery( '[rel~=tooltip]' ).trigger( 'mouseenter' )
It will show all the tips.
fantastic thank you 🙂
OK it’s strange, here’s the HTML of the tooltip contents:
<div id="tooltip" style="opacity: 1; max-width: 340px; left: 767.5px; top: 855px;"><p>From The Standard Bearer, Vol. 52, pp. 899-900, 924-925</p></div>
Chrome applies the p selector from the Genesis theme I use (black font) in preference to the #tooltip in your stylesheet.
I tried overriding in my custom css by adding p#tooltip but it doesn’t pick it up…
Perhaps the problem is that you use id instead of class in your module & css?
Plugin Author
ItayXD
(@itayxd)
Nope, it is actually the opposite ID override class, the thing is you use P element inside the tip (Which BTW you don’t need), and therefore my rule isn’t applied to the element but inherited from the parent element.
What you can do is add a rule which select the P element like so:
#tooltip p {...}
Thanks so much that did it!
(Please excuse my ignorance…)
Plugin Author
ItayXD
(@itayxd)
Glad I could help you =]
If you find this plugin useful I’ll appreciated it if you post a review
OK I’m stumped again. On http://www.socialvillage.ie/hope there’s several tooltips. The first one has larger font size than the others. Yet when I investigate them using Developer Tools, they all have the same font size (0.825em) when I can clearly see they don’t!
Plugin Author
ItayXD
(@itayxd)
Okay, this is really have nothing to do with the plugin =] but I’ll answer anyway.
em is a relative unit (you define the current element font size by using the parent element font size – https://developer.mozilla.org/en-US/docs/Web/CSS/length#em), and you applied it both to #tooltip and to #tooltip p. What happens is:
for the first tip (text isn’t wrapped in p) you get font-size=15px*0.825
for the rest of the tips (text wrapped in p) you get font-size=15px*0.825*0.825.
You have 3 main options to fix it:
- Use a fix unit (EG px) instead of a relative unit (like em).
- Be consistent! you should do it any way… either wrap in P or not.
- Use the Rem unit – Root em (https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem), which let you define the font-size relative to the root element (<html> element) font size (usually 16px by default) so if you apply 0.875rem to both
#tooltip and #tooltip p you’ll get font-size=16px*0.875=14px.
Note about rem, it isn’t supported by all versions of all browsers, you can check support on this support table: http://caniuse.com/#feat=rem
I suspected it may not be related to your plugin so I appreciate that you answered anyway! As you can see I’m a noob at this… though learning fast 😉
I defo agree with consistency. The fact that some tooltips are wrapped in P is a problematic code output which would take me 5x more to fix (being a noob) than simply to adjust for it using CSS, so that’s what I’m doing 😉
After reading your explanation, I actually fixed it by setting #tooltip p font-size to 1em, that did the trick 🙂
Thanks again for your help!
