웹마스터 팁
부트스트랩 툴팁 , 팝오버 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으로 지정되어있습니다.
즉. 마우스 클릭시 위로 팝오버가 뜨게 됩니다.
페이스북 클릭시 나오는 팝오버
반응형 , 웹표준 , 안드로이드앱 기타 등등 제작지원
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 포인트복권 팝업창 말고 현재창에서 바로 사용하기! [1] | 바가G | 2014.04.28 |
유챗 팝업창으로 만들기
[1]
 | oscarmike | 2014.04.26 |
| 도움안될 것 같은 람보의 주옥같은 팁1 (스케치북 스킨에서 ctrl+enter키로 댓글작성 완료하기) [5] | BJ람보 | 2014.04.26 |
| 머니시스템 보유머니 출력하기 [13] | oscarmike | 2014.04.24 |
| 회원가입시 아이피 기록하기 [10] | 수직상승 | 2014.04.24 |
| css를 이용한 페이지 인식 | 헤이즈디자인 | 2014.04.23 |
| Windows Server 이벤트 로그 정리하기 | StyleRoot | 2014.04.20 |
| Windows Server 에서 세션 최적화 | StyleRoot | 2014.04.20 |
| 가비아에서 웹호스팅 관련 팁 [1] | JerryKim | 2014.04.19 |
| 무한 스크롤 스크립트 [4] | 웹빌드 | 2014.04.16 |
| XE 업데이트후 갑자기 CSS/JS등이 403 오류가 날때 | YJSoft | 2014.04.16 |
|
include용 파일에는 닫는 php문이 없다?
| YJSoft | 2014.04.14 |
| NULL/XMAS 패킷 포트 스캐닝 방지 방안 | 고구마군 | 2014.04.12 |
| <div>에 ajax html 넣기 [3] | 웹빌드 | 2014.04.10 |
| xe 쪽지 보내기창에 파일첨부하기 연동하는 팁 [7] | 졸라맨 | 2014.04.09 |
| 장비 침입 탐지 및 자동 ip 차단 프로그램 소개 [4] | 고구마군 | 2014.04.09 |
|
Windows IIS 에서 F5 연타 방지하기 (mod_evasive , limit_req)
[3]
| StyleRoot | 2014.04.08 |
| jquery 외부로드하기 [22] | DynamicLaser | 2014.04.07 |
| 부트스트랩 css 팁 [3] | 돼지코구뇽 | 2014.04.05 |
| 관리자를 제외하고는 타회원의 회원정보 보기를 막는 방법 [1] | sejin7940 | 2014.04.04 |