Bootstrap 4 / Popovers / 클릭했을 때 메시지 나오게 하기
Popovers
Popover를 이용하여 요소를 클릭했을 때 메시지가 있는 작은 창을 띄울 수 있습니다. 아래는 예제 실행 영상입니다.
예제 1
요소에 다음과 같은 속성을 추가합니다.
data-toggle="popover" title="Popover title" data-content="Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor"
- data-toggle : 스크립트와 연결할 때 사용합니다.
- title : 메시지의 제목입니다. 내용과 구문되어 나옵니다.
- data-content : 메시지의 내용입니다.
다음과 같은 스크립트를 추가합니다.
<script> $( function () { $( '[data-toggle="popover"]' ).popover() } ); </script>
다음은 버튼을 클릭했을 때 메시지가 나오게 하는 예제입니다. 버튼을 다시 클릭하면 메시지가 사라집니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> h1 { margin: 50px 0px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <h1>Popovers</h1> <p> <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor">Click</button> </p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> $( function () { $( '[data-toggle="popover"]' ).popover() } ); </script> </body> </html>
예제 2
클래스를 이용할 수도 있습니다. 스크립트가 다음과 같이 바뀝니다.
<script> $( function () { $( 'xxx' ).popover( { container: 'yyy' } ); } ); </script>
- xxx : 클릭의 대상이 되는 요소의 클래스 값입니다.
- yyy : 클릭의 대상이 되는 요소의 상위 요소입니다. 찾기 귀찮다면 body를 사용하세요.
다음은 클래스를 이용한 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> h1 { margin: 50px 0px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <h1>Popovers</h1> <p> <button type="button" class="btn btn-primary my-popover" title="Popover title" data-content="Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor">Click</button> </p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> $( function () { $( '.my-popover' ).popover( { container: '.container' } ); } ); </script> </body> </html>
예제 3
data-placement를 추가하여 메시지가 나오는 위치를 정할 수 있습니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> h1 { margin: 50px 0px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <h1>Popovers</h1> <p> <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor" data-placement="top">Top</button> <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor" data-placement="right">Right</button> <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor" data-placement="bottom">Bottom</button> <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor" data-placement="left">Left</button> </p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> $( function () { $( '[data-toggle="popover"]' ).popover() } ); </script> </body> </html>
예제 4
trigger: 'focus'를 추가하면, 클릭한 요소 이외의 부분을 클릭하면 메시지가 사라집니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> h1 { margin: 50px 0px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <h1>Popovers</h1> <p> <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor">Click</button> <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor">Click</button> </p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> $( function () { $( '[data-toggle="popover"]' ).popover( { trigger: 'focus' } ); } ); </script> </body> </html>