HTML과 jQuery로 구현하는 모바일 브라우저용 툴팁 만들기

모바일 브라우저에는 마우스 호버(hover)가 존재하지 않기 때문에, title 속성만으로는 기본 툴팁이 표시되지 않습니다. 이를 해결하려면 title 속성이 있는 요소를 클릭했을 때, 해당 텍스트를 담은 자식 요소를 동적으로 추가하는 방식으로 툴팁을 직접 구현해야 합니다.

1. HTML 마크업

title 속성이 적용된 span 요소를 준비합니다.

<p>
    The <span class="demo" title="this is underscore">underlined</span> character.
</p>

2. jQuery 스크립트

span[title] 요소가 클릭되면, 이미 툴팁이 열려 있는지 확인한 후 없으면 추가하고, 있으면 제거하여 토글(toggle) 형태로 동작하도록 작성합니다.

$("span[title]").click(function () {
    var $title = $(this).find(".title");
    if (!$title.length) {
        $(this).append('<span class="title">' + $(this).attr("title") + '</span>');
    } else {
        $title.remove();
    }
});

3. CSS 스타일

점선 밑줄로 툴팁 대상임을 표시하고, 자식 요소인 .title을 절대 위치(absolute)로 배치해 말풍선처럼 보이게 합니다.

.demo {
    border-bottom: 2px dotted;
    position: relative;
}
.demo .title {
    position: absolute;
    top: 15px;
    background: gray;
    padding: 5px;
    left: 0;
    white-space: nowrap;
}

동작 원리 정리

• 사용자가 title 속성이 있는 요소를 탭(클릭)합니다.
• jQuery가 해당 요소 안에 .title 클래스를 가진 자식 span이 있는지 확인합니다.
• 없다면 title 속성의 텍스트를 담아 새로 추가하고, 이미 있다면 제거하여 툴팁을 열고 닫을 수 있습니다.

이 방식은 데스크톱의 기본 툴팁 동작을 모바일 환경에 맞게 재현하는 간단하고 효과적인 방법입니다. 필요에 따라 CSS의 위치나 색상을 조정해 디자인을 자유롭게 커스터마이징할 수 있습니다.