Title: Tooltip Strange Styling
Last modified: August 21, 2016
---
# Tooltip Strange Styling
* Resolved [manuelkuhs](https://wordpress.org/support/users/manuelkuhs/)
* (@manuelkuhs)
* [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/)
* Hi,
* Love your simple plugin.
* However, I’ve something strange. If the tooltip includes tags, then the styling
becomes strange and I can’t figure out how to change it. Tried some CSS over-
rides. The only one that worked was for p = which changed the font for all p
elements in the entire site! Not a solution…
* The problem is I’m a newb, I do CSS by hitting F12 in Chrome, and selecting the
item that I want to change so I can see and change its CSS. Unfortunately I don’t
know how to select a tooltip like that because I can’t get my mousecursor over
it…
* Anyway maybe you could have a look at my site? It’s [http://www.socialvillage.ie/hope](http://www.socialvillage.ie/hope)
* The working tooltip is in the middle entitled “Jehovah Weary With Repenting”.
The broken one is most of the others (i.e. the styling is terrible).
* [http://wordpress.org/plugins/responsive-mobile-friendly-tooltip/](http://wordpress.org/plugins/responsive-mobile-friendly-tooltip/)
Viewing 8 replies - 1 through 8 (of 8 total)
* Plugin Author [ItayXD](https://wordpress.org/support/users/itayxd/)
* (@itayxd)
* [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/#post-4020759)
* 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.
* Thread Starter [manuelkuhs](https://wordpress.org/support/users/manuelkuhs/)
* (@manuelkuhs)
* [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/#post-4020783)
* fantastic thank you 🙂
* OK it’s strange, here’s the HTML of the tooltip contents:
* `
`
* 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](https://wordpress.org/support/users/itayxd/)
* (@itayxd)
* [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/#post-4020792)
* 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 {...}`
* Thread Starter [manuelkuhs](https://wordpress.org/support/users/manuelkuhs/)
* (@manuelkuhs)
* [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/#post-4020794)
* Thanks so much that did it!
* (Please excuse my ignorance…)
* Plugin Author [ItayXD](https://wordpress.org/support/users/itayxd/)
* (@itayxd)
* [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/#post-4020826)
* Glad I could help you =]
If you find this plugin useful I’ll appreciated it
if you post a review
* Thread Starter [manuelkuhs](https://wordpress.org/support/users/manuelkuhs/)
* (@manuelkuhs)
* [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/#post-4020955)
* OK I’m stumped again. On [http://www.socialvillage.ie/hope](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](https://wordpress.org/support/users/itayxd/)
* (@itayxd)
* [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/#post-4020956)
* 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](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:
1. Use a fix unit (EG px) instead of a relative unit (like em).
2. Be consistent! you should do it any way… either wrap in P or not.
3. Use the Rem unit – Root em ([https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem](https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem)),
which let you define the font-size relative to the root element ( 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](http://caniuse.com/#feat=rem)
* Thread Starter [manuelkuhs](https://wordpress.org/support/users/manuelkuhs/)
* (@manuelkuhs)
* [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/#post-4020957)
* 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!
Viewing 8 replies - 1 through 8 (of 8 total)
The topic ‘Tooltip Strange Styling’ is closed to new replies.
* 
* [Responsive Mobile-Friendly Tooltip](https://wordpress.org/plugins/responsive-mobile-friendly-tooltip/)
* [Frequently Asked Questions](https://wordpress.org/plugins/responsive-mobile-friendly-tooltip/#faq)
* [Support Threads](https://wordpress.org/support/plugin/responsive-mobile-friendly-tooltip/)
* [Active Topics](https://wordpress.org/support/plugin/responsive-mobile-friendly-tooltip/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/responsive-mobile-friendly-tooltip/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/responsive-mobile-friendly-tooltip/reviews/)
* 8 replies
* 2 participants
* Last reply from: [manuelkuhs](https://wordpress.org/support/users/manuelkuhs/)
* Last activity: [13 years ago](https://wordpress.org/support/topic/tooltip-strange-styling/#post-4020957)
* Status: resolved