callmepartario / og-csrd

Old Gus' Cypher System Reference Document (OG-CSRD)
15 stars 12 forks source link

Add bootstrap tooltips to ability links #28

Closed Shourn closed 2 months ago

Shourn commented 2 months ago

I thought being able to reference a linked ability at a glance would be useful. Since I couldn't find a contribution guide I hope this PR is nonetheless of sufficient quality.

callmepartario commented 2 months ago

this is great, thank you so much! i will implement this today, but need to make a few changes to filenames, js, and styling, so i will do that manually instead of a merge.

Shourn commented 2 months ago

That's great to hear. Thank you for your hard work and the absolutely amazing resource you provide.

callmepartario commented 2 months ago

i've got these mostly working. i can't seem to figure out how to add a second class to the js snipped -- is there a clear way to add to the div that gets created that it's a .tooltip but also add the .theme-light class? that'd let us style them differently for dark and light mode versions of the page.

fyi, i'm adding you to the acknowledgements section of the page once a i get a moment.

Shourn commented 2 months ago

I tried a few things and the following seemed to have something very close to the desired effect:

Add additional selectors to apply the body theme to the tooltips. og-csrd.css lines 57-64

body.theme-light, body.theme-light .tooltip-inner {
    color: #000;
    background-color: #f7fbff !important;
}
body.theme-dark, body.theme-dark .tooltip-inner {
    color: #fff;
    background-color: #1c1f21 !important;
}

Remove the now unnecessary background from tooltip-inner. og-csrd.css lines 500-506

.tooltip-inner {
    max-width: 500px;
    text-align: left;
    font-family: 'Open Sans', Arial, sans-serif;
    border: 0.25rem solid #408b93;
    /*background-color: #1f2733;*/  /*<- this line can be removed */
}
callmepartario commented 2 months ago

gotcha, i see how that selection process works. i really should have thought of trying that, in retrospect. thanks again!