부트스트랩에서 풍선도움말, 툴팁

부트스트랩에서 풍선 도움말(툴팁,tooltip)을 만드는 법에 대해 간단히 설명하고자 합니다. 부트스트랩을 사용한다면 웬만하면 자바스크립트나 CSS를 동원하지 않는다고 생각하면 됩니다. 그것은 부트스트랩에 포함됐습니다. 

어떤 풍선도움말인가 궁금할 것입니다. 이 블로그 상단 방명록 옆 아이콘 두 개에 마우스를 갖다 대면 검정 배경에 흰색 글씨 풍선 도움말이 나타납니다. 이렇게 하는 것을 설명하고자 합니다. 참고로 이 블로그는 부트스트랩 v3.3.6의 CSS와 자바스크립트를 사용하고 있습니다. 이 글을 쓰는 지금 정식 버전을 3.3.6이고 4 알파 버전이 나왔습니다. 웬만하면 알파 버전은 사용하지 마세요. 여담으로 예전에 부트스트랩을 사용하지 않고 풍선 도움말은 구현하려고 고생했다는....

HTML 태그에서 풍선 도움말을 만들려면 단지 태그 마지막에 title을 작성하면 된다는 것을 알 것입니다. 그러면 부트스트랩에서 어떻게 하는지 설명하겠습니다. 먼저 풍선 도움말을 사용하겠다고  data-toggle="tooltip" 적습니다. 그 다음에 풍선 도움말의 나올 방향을 정합니다. HTML에서는 무조건 위인데 반해 아래 그림과 같이 풍선 도움말이 좌/우/상/하 네 방향으로 나오도록 data-placement="left"/"right"/"top"/"bottm"을 주가 하면 됩니다.  만약 풍선 도움말이 아래로 나오게 하고 싶다면 data-placement="bottom"이겠죠.

아래 그림의 빨간 사각형을 보면 풍선 도움말이 아래로 나온다는 것을 알 수 있습니다. 왜냐하면 data-placement를 bottom이라 사용했기 때문입니다. 그 아래도 부트스트랩 풍선 도움말인데 data-placement을 설정하지 않았다는 것을 알 수 있습니다. 위로 나오는 경우는 data-placement를 지정하지 않아도 되나 이 글을 쓰면서 생각했는데 쓰는 것이 좋을 것 같다는....왜냐하면 일관성을 위해서.....

그럼 위를 보면 부트스트랩에서 풍선 도움말(툴팁,tooltip)은 아래처럼 하면 된다고 요약할 수 있습니다.

1.  data-toggle="tooltip" : 풍선 도움말을 쓰겠다고 정의한다. 

2.  data-placement="top/bottom/left/right" : 풍선 도움말이 나올 방향을 쓴다. - 4 방향 중 한 곳 선택

3.  title="" : 풍선 도움말을 적는다. 
   

이 블로그 여러 곳에 부트스트랩 풍선 도움말을 사용했습니다. 그리고 풍선 도움말을 영어로 사용하는 사람도 있으니 툴팁이라는 것도 알아두기 바랍니다. 영어 페이지인 경우는 tooltip을 사용하니 반드시 알아야 합니다. 코드를 작성할 때 tooltip이라는 것을 많이 사용하니 자연히 익히게 됩니다. 참고로 아래에서 부트스트랩 풍선 도움말에 대해서 자세히 배울 수 있습니다. 한글 부트스트랩이 한글이라 쉬울 것입니다.

• http://bootstrapk.com/javascript/#tooltips : 한글 부트스트랩
• http://getbootstrap.com/javascript/#tooltips : 부트스트랩 공식(영어)
• http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp :w3schools.com bootstrap(영어)

이렇게 쉽게 풍선 도움말을 만들 수 있는데....부트스트랩을 사용하고 보면 많이 느끼겠지만 독창성이 없다는....그리고 부트스트랩으로 만든 사이트는 보면 거의 유사하거나 딱 보면 알 수 있다는....다른 부트스트랩 사이트를 봤더니 비슷하더라고요. 어떤 사람은 이런 것이 싫을 수 있습니다. 그래도 쉬워서 그런지 부트스트랩을 사용하는 사람이 많더라고요. 

좋은 예는 아닐지 모르나 네이버 블로그도  쉽다는 이유로 많은 사람이 사용할 것입니다. 티스토리는 네이버 블로그에 비하면 제한이 없어 독창적으로 만들 수 있어 좋습니다. 네이버 블로그는 딱 보면 알 수 있습니다. 네이버 블로그는 없앨 수 없는 것이 있으나 티스토리에서는 거의 모든 것을 없앨 수 있거든요. 예로 네이버메뉴(툴바),프로필,카테고리 등. 그런데 티스토리는 너무 어려워 피곤해요.