Q&A

사용중인 레이아웃이 프레임워크인 트위터 부트스트랩을 기본으로 쓰고 있어서 이미 툴팁에 대한 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

  • 지금 적혀 있는 코드만으로는 알수가 없는 문제입니다.
    해당 레이아웃을 쓰는 사람이면 모를까요.
    주소라도 알아야 뭘 보죠.
  • @DoubleU
    앗 그렇군요.. http://www.bodyever.com/test 입니다. 위 소스를 적용했습니다. 위치도 안먹히고,, 기능도 안됩니다..
  • @프라임
    집에가면 저녁차려먹고 한번 볼께요~
    집사람이 심한 감기라 집안일이 가득이네요... ㅡㅇㅡ
  • @DoubleU
    네 감사합니다.
  • 페이지를 확인해봤습니다.
    툴팁이 작동되는 소스까지는 보지 않았습니다만.

    1. 먼저 전제되어야 할 것이 모바일은 마우스 오버의 개념이 없습니다.
    즉 pc와 같은 동작으로는 불가능 하다는 것이죠.
    모바일에서 마우스 오버는 클릭과 동일합니다.

    2. href="#"로 인해 클릭하면 새로고침되면서 위로 올라가는 불편함이 있습니다.
    크롬에서는 그렇네요.

    3. 1번의 이유로 인해서 지금 사용하시는 툴팁의 동작을 봐선 모바일에서 원하는 동작은 어려울것 같습니다.
    저라면 다른 툴팁을 찾아보겠습니다.
    http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly
    이런거 말이죠.
  • @DoubleU

    아 그렇군요.. 어떻게 적용하면 좋을까요? <abbr title="User Experience" rel="tooltip">UX</abbr> 이걸 넣어보니 모바일에서는 역시 안됩니다..

    해당링크에 있는 css 와  자바소스를 해당 레이아웃부분에 추가해 봤습니다. 역시 안됩니다. ㅠㅠ

    자바의 경우 통채로 넣으니 슬라이드 기능이 안되는 문제가... ,,

  • @프라임
    xe에선 jquery를 쓸 때 $가 아닌 jquery로 써야하는데 그렇게 바꾸셨나요?

    안되는 것을 찾을 땐 하나씩 지워가면서 될때까지 하다보면 언젠간 나옵니다...
    제가 컴터를 꺼서.. 내일이나 볼수 있을 것 같아요 ㅡㅇ ㅡ
  • @DoubleU

    제가 확인해 본 결과 이게 정답입니다.

     

    캡처.PNG

     

  • @불금

    앗 좀 자세하게 설명 부탁드리겠습니다. 해당코드를 삭제해야 하나요? 해당코드 찾아보니 보이지가 않습니다.

  • @DoubleU
    감사합니다. 잘모르지만 한번 해보겠습니다.
  • @프라임
    그리고 펑션 이름 겹치는 것 없는지도 확인해보시구요~