For spoiler, add tooltip text like `Reveal Spoiler!`. Similar for hide details

Feature
1

I often use blur spoilers for answering homework questions and Hide details for adding details that don’t need to take up space in the post.

In checking one of my old StackOverflow answers noticed that it now has a nice tooltip for the spoiler, i.e.

image

As we know, many new to Discourse don’t bother to learn the ways of Discourse and so I often have to explain how to use a spoiler

This text will be blurred

or hide details

Summary

This text will be hidden

If these had some tooltip, then I would be happier. :slightly_smiling_face:

EDIT

When I wrote this for some reason I could not remember the name tooltip. Thanks @merefield.

So I changed overlay text to tooltip. If some of the responses seem off, blame me.

2 Likes
2

This CSS might be a workaround:

.spoiler-blurred {
    filter: blur(0);
    & > * {
        filter: blur(0.5em);
    }
    &:after {
        content: "Reveal Spoiler ⚠";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
4 Likes
3

A simple tooltip might be helpful here? I must admit I don’t find it 100% intuitive. A little tooltip guidance would be nice …

Yep @canapin that would work :slight_smile: :+1:

1 Like