Bootstrap 4 / Popovers / 클릭했을 때 메시지 나오게 하기

Popovers

Popover를 이용하여 요소를 클릭했을 때 메시지가 있는 작은 창을 띄울 수 있습니다. 아래는 예제 실행 영상입니다.

예제 1

요소에 다음과 같은 속성을 추가합니다.

  • data-toggle : 스크립트와 연결할 때 사용합니다.
  • title : 메시지의 제목입니다. 내용과 구문되어 나옵니다.
  • data-content : 메시지의 내용입니다.

다음과 같은 스크립트를 추가합니다.

다음은 버튼을 클릭했을 때 메시지가 나오게 하는 예제입니다. 버튼을 다시 클릭하면 메시지가 사라집니다.

예제 2

클래스를 이용할 수도 있습니다. 스크립트가 다음과 같이 바뀝니다.

  • xxx : 클릭의 대상이 되는 요소의 클래스 값입니다.
  • yyy : 클릭의 대상이 되는 요소의 상위 요소입니다. 찾기 귀찮다면 body를 사용하세요.

다음은 클래스를 이용한 예제입니다.

예제 3

data-placement를 추가하여 메시지가 나오는 위치를 정할 수 있습니다.

예제 4

trigger: 'focus'를 추가하면, 클릭한 요소 이외의 부분을 클릭하면 메시지가 사라집니다.