웹마스터 팁

  2. Support
  3. 웹마스터 팁

부트스트랩 툴팁 , 팝오버 TIP

2014.11.17 15:25

돼지코구뇽

부트스트랩 다들 아실거라 생각하고 ..


모르시는분들은 : http://bootstrapk.com/


반응형웹에 천재상을 받은 부트스트랩..


여기서 부트스트랩 js 파일이 존재하는데 호출을 하였음에도 불구하고


툴팁 또는 팝오버가 실행되지 않으시는분은 해당 사이트에 메뉴얼을 놓치신겁니다.


<!--부트스트랩-->

<script src="./bootstrap.min.js"></script>

<link rel="stylesheet" href="./bootstrap.min.css" type="text/css" rel="stylesheet">


이와같이 호출을 하고서 그후에 스크립트는 들어있지만 속성값을 선언해줘야 된다는 메뉴얼대로


<script type="text/javascript"> $(document).ready(function(){ $(".popover-top").popover({trigger: 'hover click','placement': 'top'}); }); </script>

위와같이 해당 페이지 또는 상단 스크립트라인에 넣어주시고

(클래스를 보시면 popover-top으로 되어있고 오버 또는 클릭시 이벤트가 들어가있습니다.)

<a href="#" class="btn btn-info" data-toggle="popover-top" data-content="설명글" title="제목">버튼명</a>

코드 사용시 버튼을 예로 들었는데요

data-toggle 이란 부트스트랩에 기초 스크립트 사용방법입니다.

자신이 사용할 스크립트를 적는거죠. 만약 저 부분에 툴팁이나 모달을 넣으시면 작동됩니다.
(단, 메뉴얼대로 스크립트를 지정해줘야하며 모달경우는 따로 페이지에 ID를 지정해줘야됩니다.)

popover-top 클래스는 제가 임의로 넣은거니 사용시와 스크립트코드 지정시에 알맞게 하시면됩니다.

제가 top을 예로 든건데 스크립트 맨 우측에 보면 top으로 지정되어있습니다.

즉. 마우스 클릭시 위로 팝오버가 뜨게 됩니다.

2.gif 페이스북 클릭시 나오는 팝오버




이 게시물을
Profile

반응형 , 웹표준 , 안드로이드앱 기타 등등 제작지원

 

좋아요
목록
제목 글쓴이 날짜
TRAC과 SVN을 참조하여 1.0.5의 애드온 설정 버그 해결하기 Adios 2008.08.04
첨부화일 등록시 사라지는 현상 [2] 0라이트0 2008.08.05
닉네임, 이름 정보변경 못하게 하기. [6] 부엉이 2008.08.06
설치시 초기화면으로 돌아가는 현상 해결 [1] spk 2008.08.07
오픈 아이디(OpenID)로만 로그인 허용하기 [7] withover.com 2008.08.07
댓글 첨부파일부분 닫기/열기 추가 [1] file Gnee 2008.08.09
렙업시 소속그룹 없어지는 문제! 얍실하게 해결.. 쿨럭. [2] file 이슈카ㆀ 2008.08.12
rewrite mod 사용 않될 경우 해결 방법 1가지 블루스카이77 2008.08.13
권한 문제 때문에 생길 수 있는 문제 해결 방안 꽃들 2008.08.14
zbxe에서 piclens 사용하기 [2] 우정진 2008.08.15
미국 yahoo zbxe 설치 및 mysql 연결 [4] mr007 2008.08.15
이미지 좌측 정렬시 내용이 적으면 아래부분 올라오는 문제 해결법 [2] file 대류 2008.08.16
zbxe에 bgm을 설치하자 [11] file 우리아기 2008.08.16
인용구 접기기능 링크이름 Underline 없애기 [4] file 똑디 2008.08.19
[초보팁] 우리말 수정하기(예제: 가입창 이름란 삭제) [3] 블루파티 2008.08.19
한글로 된 이미지 문제 [17] Defy 2008.08.19
로그인 문제 및 첨부파일 안올라가는 문제 해결책(세션 문제일 경우..) [6] file 이홍석295 2008.08.20
[게시판] 이미존재하는 모듈이름 입니다. 오류. [2] 나이스가이212 2008.08.21
방문자수 (카운터) 마음대로 조작하기 [37] file Br_7941 2008.08.23
라이프팟 연동에서 XML 주소 얻기 최재원541 2008.08.23
태그 쓰기