웹마스터 팁
부트스트랩 툴팁 , 팝오버 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으로 지정되어있습니다.
즉. 마우스 클릭시 위로 팝오버가 뜨게 됩니다.
페이스북 클릭시 나오는 팝오버
반응형 , 웹표준 , 안드로이드앱 기타 등등 제작지원