웹마스터 팁

  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

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

 

좋아요
목록
제목 글쓴이 날짜
업그레이드 쉽고,안전하게 하기(예제 포함해서 다시 올림) [2] file wannabewize 2008.07.13
에디터입력창 배경색상(이미지) 변경해보기 [5] [1] 팔공산 2008.07.13
초보 헤메다가 팁//인쇄영역 확장변수 포함 [8] file 리히토 2008.07.14
초보 헤메다가 팁//검색기능 보이기 감추기 [3] file 리히토 2008.07.15
자료 첨부 문제 단풍534 2008.07.15
초보 헤메다가 팁//댓글기능 보이기 감추기 [5] 리히토 2008.07.15
winxp IE7 rwapm에서 한글이름파일 업로드 [7] file 공수래 2008.07.15
게시글 본문 좌, 우측에 div 내용 넣기(수정) [5] file 라르게덴 2008.07.18
게시판(블로그)상단에 글쓰기버턴이나 링크넣기 [8] file 팔공산 2008.07.20
관리자만 ip 보이게 하기 [10] 老姜君 2008.07.20
로그인이 안되는 문제 [1] 젝망치 2008.07.21
로컬 설치 후 몇가지 문제점에 대해서 - 인덱싱. DB선택 등 서정일643 2008.07.22
본문의 서명과 프로필이미지를 끌어올려보자 [11] file CL님 2008.07.22
초간단! 게시물주소 클릭시 복사하기 ! [4] file gnee 2008.07.26
제로보드XE에서 표 쉽게 만드는 방법.. [23] 청개구리00 2008.07.27
코멘트를 달아야만 첨부파일 다운로드 할 수 있게 하기 [8] file 지오426 2008.07.29
제로보드XE 설치 완료버튼 누르니까 My sql 관련 내용 나오던데요 [3] Naver™ 2008.07.30
1.0.3 버전 이상부터 본문 내 이미지 자동 리사이징이 안되는 경우 [1] kirrie 2008.08.01
1원팁) 톱메뉴를 제거하고 왼쪽 서브메뉴만 출력하는 방법 [2] file Gnee 2008.08.02
제로보드 문자열 정교하게 자르기 [11] 젝망치 2008.08.03
태그 쓰기