System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 19:45:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed the tooltips sharing CSS content property through .tooltip

Browse source
This commit is contained in:
mjh316 2023-09-14 10:48:28 -07:00
parent d7f3e8b81d
commit f895e393be
4 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -7,3 +7,4 @@ public/sitemap.xml
.vercel
.vscode
yarn-error.log
bun.lockb

4
components/hcb/directory/card.js
View file

@ -111,8 +111,8 @@ export const OrganizationCard = ({
}}
>
{badges.map((badge, i) => (
<Tooltip.W key={i} text={badge.label}>
<span class="tooltipped">
<Tooltip.W key={i} text={badge.label} id={badge.id}>
<span class={`tooltipped-${badge.id}`}>
<Badge badge={badge} />
</span>
</Tooltip.W>

15
components/hcb/tooltip.js
View file

@ -8,9 +8,8 @@ const addClassNameToChildren = (children, className) =>
)
const tooltip = direction =>
function Tooltip({ children, text }) {
function Tooltip({ children, text, id }) {
const escapedText = text.replace(/'/g, "\\'")
const directionalStyles = {
e: `
left: 100%;
@ -41,12 +40,12 @@ const tooltip = direction =>
return (
<>
<style>{`.tooltipped {
<style>{`.tooltipped${id ? '-' + id : ''} {
position: relative;
}
@media (min-width: 56em) {
.tooltipped:after {
.tooltipped${id ? '-' + id : ''}:after {
background-color: rgba(31, 45, 61, 0.875);
border-radius: 0.5rem;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
@ -74,15 +73,15 @@ const tooltip = direction =>
}
.tooltipped:hover:after,
.tooltipped:active:after,
.tooltipped:focus:after {
.tooltipped${id ? '-' + id : ''}:hover:after,
.tooltipped${id ? '-' + id : ''}:active:after,
.tooltipped${id ? '-' + id : ''}:focus:after {
opacity: 1;
z-index: 9000000;
backdrop-filter: blur(2px);
}
.tooltipped:after {
.tooltipped${id ? '-' + id : ''}:after {
${directionalStyles}
}
}`}</style>

17
pages/hcb/climate/index.js
View file

@ -669,13 +669,16 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
</ThemeBadge>
))}
{badges.forOrg(modalOrganization).map((badge, i) => (
<Tooltip.N key={i} text={badge.tooltip}>
<span class="tooltipped">
<Badge badge={badge} />
</span>
</Tooltip.N>
))}
{badges.forOrg(modalOrganization).map((badge, i) => {
console.log('badge', badge.label)
return (
<Tooltip.N key={i} text={badge.tooltip} id={badge.id}>
<span class={`tooltipped-${badge.id}`}>
<Badge badge={badge} />
</span>
</Tooltip.N>
)
})}
</Flex>
<Flex