Add hover details component

[mirnawong1]

as part of the epd mentorship, this pr adds a details toggle component so that we can use the following component in the markdown file to add faq-like toggles (alternative to<details></details>) and provide users a 'hover' functionality that displays the content within the toggle if you hover over the question/header. this also saves them from clicking the toggle. it does allow enable users to override the hover experience and click on the faq to expand the content.

react code to test in your local host

# Your Markdown Content

Some introductory text here...

<detailsToggle alt_header="Your Question or Header Here">
 
This is the content that will be shown or hidden when the detailsToggle component is toggled. You can write your content here, just like in regular Markdown.

</detailsToggle>

Continuing with more Markdown content...

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-getdbt-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 15, 2023 1:27pm

[matthewshaver]

Messing around in the preview, and came across behavior that might frustrate users. Once the hover is activated, there isn't a way to keep the text open. If they click the text while the hover is active, it closes the window rather than keeping it open, they then have to click again to open, but if the move the cursor away and back over, the hover will activate again.

This could frustrate users if there are links in the text they want to click on. If they hover, they see the text, then leave the hover to try and click on a link, and the text box closes. Is there a way we can set it so if they click on the headline during the hover view it will keep the text open?

Here's a loom to highlight what I mean: https://www.loom.com/share/98e46e4820a54771b6ef3150a77e17d6

[mirnawong1]

i totally know what you mean. i'm actually working on trying to enable that option right now in my local so this behavior will hopefully change by tomorrow!

[mirnawong1]

hey @JKarlavige , i addressed Matt's comment but it still doesn't behave the way i'd like to. i think i read i need to create a parent component because the one doesn't interact with the other potential components in the md file.

is the current solution ok for now?

[JKarlavige]

but it still doesn't behave the way i'd like to.

What is the ideal behavior you're looking for here? Are you looking to have all other detail toggles close when another one is opened?

It looks like your latest edits definitely improve the functionality from what @matthewshaver showed in the Loom. Matt, curious what you think of the functionality after the edits? I don't see it being an issue having the toggles remain open after hover, with the option to close them by clicking.

If good with you, i'm good with how it's behaving currently!

[mirnawong1]

that's right @JKarlavige ! i was trying to make it so that if i navigate away from the selected toggle, it should close when i hover to another toggle or navigate away from the entire content box.

if you're happy with the current solution @JKarlavige and @matthewshaver - I'm happy too!

[JKarlavige]

lgtm!!