Around the site, there are innumerable amounts of links to user profiles. When hovered, they create javascript tooltips; these don't show up in the HTML DOM unless they are created, i.e. the user link is actively hovered. These are the same tooltips that show our name, active pet, achievements, etc.

My dilemma is that I would like to style this tooltip on a pet profile. It looks jarring against my theme. I don't know any javascript so I don't know how to dive through the heaps of js documents in my inspector to find the selectors to the tooltip.

tl;dr Does anyone have the HTML tree/selectors for the user pop-up?

here you go if this helps, and you can paste it into here for a slightly better visualisation.. it's not very pretty. from my observation, there are html divs and inline css to style the popup when it's above, to the left of, to the right of, and underneath the link you're hovering upon (in this case, the structure i copied it from is showing the tooltip as i saw it hovered above your name; the hidden ones (left of, right of, below) are invisible ("display:none;"). i think everything you change via css will have to be followed by !important.

what you will probably find easier to do is to use chrome but it's still a really contrived solution i found out by accident ?_? i'm not sure if it still works, i don't have chrome right now to try it.

1. open up the console/inspector and drag the window high up enough
2. then hover over your name to pop up the tooltip
3. right-click anywhere on the tooltip, anywhere close enough for the menu to reach down to the console
4. carefully move your cursor from the tooltip to the menu, down the menu, and into the text panel
5. as long as you don't move your mouse back up to the page, you can make your edits without the tooltip disappearing

(god i hope i'm making sense, if you need a more visual guide to go by, pictures or whatnot let me know!)

I have done that hover trick before in Firefox; it was a complete accident, however. I did find that .tpd-tooltip was the parent selector. I just have no way of opening. I am almost sure that all similar elements (i.e. top/bottom/left/right instances) shared classes. I just need to see the HTML markup. I have a few more tricks to try though. Thanks for your suggestions! [edit] I feel bad. There is a whole section of CSS for tpd on the styles.css. I never had to mess with js. I'm currently poking around to try to get a reduced list of selectors one can use to style the tooltip.

ahh you're right!! i don't even know why i didn't check styles.css first >< i messed with it a while back when i didn't realize there was css for it so everything i added followed up with !important. but here's a pet with the tooltip styled; and looking back at the css it's much easier than i remember @-@ this is all i had to touch:

.tpd-tooltip .tpd-content <- background and height/width of the box .tpd-loading-icon <- can change color of loading icon .tpd-stem-triangle <- size and position of triangle .eight.column.wide h3 <- name .eight.column.wide <- post and trophy count .hover_user_pet & .ui.circular.image <- pet-related .tpd-shift-stem-side, .tpd-stem-border, .tpd-backgrounds <- tooltip shadows and borders

feel free to look into it if it helps any! you can find what i changed in sbt-basicpet.css.

VERY useful! This is what I came up with in order to simply style the tooltip. Like you correctly said before, important values are needed to edit the default skin. BONUS: This ALSO styles the triangle and the loading styles. I will probably add your rules for name, post/trophy count, and active pet if I ever make a guide for this. I'm pretty new to Subeta so I'm getting a feel for economy, profile demand, and how to use the forums without getting warned/banned.

/* text */ .tpd-content {color: VALUE important;}

/* background */ .tpd-background-content, .tpd-background-title {background: VALUE !important;}

/* border */ .tpd-background {border: VALUES important;}

.tpd-title-wrapper {border-bottom: VALUES !important; }

.tpd-spinner-spin {border-left: VALUES !important;}

/* shadow */ .tpd-background-shadow {box-shadow: VALUES !important;}

welcome to subeta!! you're doing just fine, so don't worry all too much. :D

what you've written is a great way to organize/make sense of all the info. i don't recall anyone ever making a guide to style tooltips specifically, so it'll be helpful for sure.