사용중인 레이아웃이 프레임워크인 트위터 부트스트랩을 기본으로 쓰고 있어서 이미 툴팁에 대한 js가 링크되어 있다고 합니다.
그래서 아래와 같은 소스를 사용해 봤습니다.
<a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">텍스트</a>
이걸 사용해보면 잘되기는 합니다.. 그런데,, 제홈이 반응형인데요 모바일에서 접속하면 메뉴가 터치가 안되고 툴팁기능도 안됩니다..
PC에서는 잘되는데, data-placement="left" 여기에서 left 를 top 나 right로 변경해봐도 위치는 그대로입니다..
조언좀 부탁드리겠습니다..
감사합니다.
추가...
http://getbootstrap.com/javascript/#tooltips
이곳의
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
이걸 적용해봐도 마찬가지입니다
댓글 11
해당 레이아웃을 쓰는 사람이면 모를까요.
주소라도 알아야 뭘 보죠.
집사람이 심한 감기라 집안일이 가득이네요... ㅡㅇㅡ
툴팁이 작동되는 소스까지는 보지 않았습니다만.
1. 먼저 전제되어야 할 것이 모바일은 마우스 오버의 개념이 없습니다.
즉 pc와 같은 동작으로는 불가능 하다는 것이죠.
모바일에서 마우스 오버는 클릭과 동일합니다.
2. href="#"로 인해 클릭하면 새로고침되면서 위로 올라가는 불편함이 있습니다.
크롬에서는 그렇네요.
3. 1번의 이유로 인해서 지금 사용하시는 툴팁의 동작을 봐선 모바일에서 원하는 동작은 어려울것 같습니다.
저라면 다른 툴팁을 찾아보겠습니다.
http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly
이런거 말이죠.
아 그렇군요.. 어떻게 적용하면 좋을까요? <abbr title="User Experience" rel="tooltip">UX</abbr> 이걸 넣어보니 모바일에서는 역시 안됩니다..
해당링크에 있는 css 와 자바소스를 해당 레이아웃부분에 추가해 봤습니다. 역시 안됩니다. ㅠㅠ
자바의 경우 통채로 넣으니 슬라이드 기능이 안되는 문제가... ,,
안되는 것을 찾을 땐 하나씩 지워가면서 될때까지 하다보면 언젠간 나옵니다...
제가 컴터를 꺼서.. 내일이나 볼수 있을 것 같아요 ㅡㅇ ㅡ
제가 확인해 본 결과 이게 정답입니다.
앗 좀 자세하게 설명 부탁드리겠습니다. 해당코드를 삭제해야 하나요? 해당코드 찾아보니 보이지가 않습니다.