11/17 45-4 [BS] Popover

Popover : 클릭하면 작은 말풍선이 뜬 다 !

 

 

1. Basic : 토글로 클릭해서 생겼다 지웠다 반복

                title과 content 부분이 있다! 

  <h2>Basic Popover</h2>
  <a href="#" class='btn btn-success' data-toggle="popover" title="비밀" data-content="임금님귀 당나귀귀!!!!">Toggle popover</a>

 

 

2. 자바로 구현 및 popover 위치 다양하게 설정하기!

 ++ popover 토글토글할 때 기본적으로 버튼을 눌러야 적용이 되는데 

      트리거 속성 추가하면 data-trigger="focus" 요거 넣으면 그냥 아무데나 클릭 해도 popover는 사라진다 !

++  한김에 더 추가로  data-trigger="hover" 를 넣으면 마우스 오버로 popover 생김 !!

        <h2>Positioning Popovers</h2>
        <a href="#" data-placement="top" class='btn btn-success' data-toggle="popover" title="비밀1" data-content="여긴 위지!" data-trigger="focus">TOP(FOCUS)</a>
        <a href="#" data-placement="bottom" class='btn btn-info' data-toggle="popover" title="비밀2" data-content="여긴 아래지!" data-trigger="hover">BOTTOM(HOVER)</a>  
        <a href="#" data-placement="Left" class='btn btn-warning' data-toggle="popover" title="비밀4" data-content="여긴 왼쪽!">LEFT</a>
        <a href="#" data-placement="right" class='btn btn-dark' data-toggle="popover" title="비밀3" data-content="여긴 오른쪽!">RIGHT</a>
                
    <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
            //반드시!!!! 태그의 data-* 속성 및 자바스크립트와 함께 구현해야 한다.
            // 그래서 위에 data-placement="" 가 들어가 있음 !!
    	});
    </script>

 

 

3. 자바스크립트로만 구현하기 !!

코드 보면 a태그에 있던 중요부분들 다 빠짐!! 자바스크립트로만 해서 구현한거임 와우.... 

anmation은 버튼 클릭 하고 나서 지정한 시간 있다가 나타남

html구현도 추가하면 가능함

   <h2>자바스크립트로 구현</h2>
        <a href="#" class='btn btn-success top-popover'>TOP(focus)</a>
        <a href="#" class='btn btn-info bottom-popover'>BOTTOM(hover)</a>
        <a href="#" class='btn btn-dark right-popover'>RIGHT</a>
        <a href="#" class='btn btn-warning left-popover'>LEFT</a>      
   <script>
    $(document).ready(function(){
        $('.top-popover').popover({title:'위쪽',placement:'top',content:'위쪽에 보이는 팝오버!',trigger:'focus'});
        $('.bottom-popover').popover({title:'아래쪽',placement:'bottom',content:'아래쪽에 보이는 팝오버!',trigger:'hover'});
        $('.left-popover').popover({title:'왼쪽',placement:'left',content:'<strong>왼쪽</strong>에 보이는 팝오버!',html:true,animation:true,delay:{show: 300, hide: 100}});      
        $('.right-popover').popover({title:'오른쪽',placement:'right',content:'오른쪽에 보이는 팝오버!'});
    });
    </script>