krsnik

færie princess

Trans plural poly catgirls / 30s


scaredgirlsilly
@scaredgirlsilly

could someone who knows css well help me with something theres a really cool thing in a fanfic i like that i want to do on here but i dont know how or if its even possible


scaredgirlsilly
@scaredgirlsilly

btw its from this fic https://archiveofourown.org/works/24240652/chapters/58410412?view_adult=true and i want to have the thing where you hover over a word and a little tooltip box appears. i need it,,,,

edit: sorry didnt make it clear i meant the part where you hover over roses name and all the other like dotted underlined names


mezzofurrte
@mezzofurrte

Using inspect element on the page, this is isn't how they do it

<a title="Tooltip goes here">text goes here</a>

scaredgirlsilly
@scaredgirlsilly

i dont think they did cause on the fic its like instant unless theres some way to get rid of the little delay BUT that is still super cool and i will absolutely use that thank you ^u^


krsnik
@krsnik

Okay, so i think i figured it out. The things you can hover over are <div class="tip"> in the html containing a <p><span class="Text">Name</span></p> and also a <div class="thought"> which is the actual popup box.

The CSS has both .tip .thought { display : none; } and .tip:hover .thought { display : block; } which hides the popup unless the name is hovered over.

Well really there are a bunch of classes "whateverText" and "whateverthought" etc, for different styling, but they all seem to work the same


You must log in to comment.

in reply to @scaredgirlsilly's post:

so ao3 uses workskins that basically nudge the work to borrow from a preset of rules. you can view it if you inspect the sourcecode rather than the element, it has all the formatting rules like the colors and the like. btw you sent me down a rabbit hole cuz i was trying to figure out how to do something similar for a fic of my own and now i'm dissecting this workskin like surgeon lol