스포일러에 '스포일러 보기!' 같은 툴팁 텍스트를 추가하세요. 세부 정보 숨기기도 마찬가지입니다

기여 기능
1

과제 질문에 답할 때는 blur spoilers(블러 스포일러)를, 게시글의 공간을 차지할 필요가 없는 세부 정보를 추가할 때는 Hide details(세부 정보 숨기기)를 자주 사용합니다.

이전에 작성한 StackOverflow 답변 중 하나를 확인해 보니, 이제 스포일러에 깔끔한 툴팁이 표시되는 것을 알게 되었습니다. 즉,

image

알다시피 Discourse를 처음 접하는 많은 사용자는 Discourse의 사용법을 익히는 데 신경을 쓰지 않는 경우가 많아서, 저는 스포일러 사용법을 설명해야 하는 상황이 자주 발생합니다.

이 텍스트는 흐리게 표시됩니다

또는 세부 정보를 숨기려면

요약

이 텍스트는 숨겨집니다

이것들에도 툴팁이 있다면 더 만족스러울 것입니다. :slightly_smiling_face:

수정

이 글을 쓸 때 왜인지 tooltip(툴팁)이라는 이름을 기억하지 못했습니다. @merefield님께 감사합니다.

그래서 overlay text(오버레이 텍스트)를 tooltip(툴팁)으로 변경했습니다. 일부 답변이 어색하게 느껴진다면 제 탓으로 돌리십시오.

2개의 좋아요
2

이 CSS가 우회 방법이 될 수 있습니다:

.spoiler-blurred {
    filter: blur(0);
    & > * {
        filter: blur(0.5em);
    }
    &:after {
        content: "스포일러 보기 ⚠";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
4개의 좋아요
3

여기서 간단한 툴팁이 도움이 될까요? 솔직히 100% 직관적이라고 느끼지 못합니다. 작은 툴팁 안내가 있으면 좋겠어요 …

네, @canapin 그 방법이 잘 작동할 것 같습니다 :slight_smile: :+1:

1개의 좋아요