[bootstrap] Tooltip(hover) 사용하기

공식 사이트 document

https://getbootstrap.com/docs/4.1/components/tooltips/

 

아래의 설명과 같이 Popper.js를 따로 하시려면 bootstrap.js 전에 사용하면 됩니다.

혹은 그냥 bootstrap.bundle.min.js 를 사용하면 됩니다.

 

그 후 공식 홈에 나와있는 바와 같이

html

script

이렇게 사용하면 됩니다.

저는 이렇게 사용해서 비동기 요청으로 화면 전환을 시도했습니다.

html

<a class="profile_img_label" data-toggle="tooltip" data-placement="bottom" 
							      				title="Tooltip on bottom" data-id="" onclick="toOverview();" href="javascript:void();">
	<img class="rounded-circle profile_img" height="50" width="50" src="${mem_pic_file_name }">
</a>

javascript

페이지 로딩시 ajax로 데이터 쏴주기

tooltip 실제로 작동 시키기.

클릭 시 페이지 비동기로 전환시키기.

moPageHistoryMember()의 경우 function으로 따로 준 녀석입니다. 비동기로 페이지가 전환되기 때문에

browser history에 저장하고 그 후에 ajax를 요청한 후 페이지를 변경해 주는 function입니다.

(페이지 제일 하단에 해당 function은 첨부해 두겠습니다.)

작성 했을 시 이렇게 tooltip이 잘 나오는 것을 알 수 있습니다.

** 여기서 문제가 발생하는데 비동기 요청이다 보니 클릭 후 페이지가 바뀌어버려서 tooltip이사라지지 않습니다.

이렇게 되어버립니다. 그래서 페이지가 변경되기 전에 .tooltip("hide")를 적용시켜 줍니다.

 

그러면 페이지 전환 후 잘 없어지는 것을 알 수 있습니다.

 

 

위에 언급했던 movePageHistory입니다. history.pushState로 비동기로 요청함과 동시에 page에 기록을 해 놓는 기능이 추가되어 있습니다.

// 뒤로가기 상황을 제외하고는 pushState를 통해 데이터를 쌓아야합니다.
		var movePageHistory = function(pageParam){
			var data = pageParam;
			var title;
			var url = getContextPath()+'/'+manager_id+'/'+project_title + (pageParam ? '/'+pageParam : '') ;
			history.pushState(data, title, url);
			movePage(pageParam);
		}
		
		// 뒤로가기 상황에서는 movePage 함수를 바로 호출합니다. 그렇지 않으면 history가 꼬이게 됩니다.
		var movePage = function(pageParam){
			// project 페이지에서는 vertical로만 보여줍니다.
			new quixSettings({
			    layout: "vertical" // vertical or horizontal
			});
			
			// 화면 위로 올리기
			window.scrollTo({top:0, left:0, behavior:'auto'});
			
			if(!pageParam)
				pageParam = 'code';
			
			$.ajax({
				url : getContextPath() + '/view/project/' + pageParam,
				type : 'get',
				data : {'manager_id' : manager_id,'project_title' : project_title
					},
				success : function(res) {
					$('.content-body').html(res);
				},
				error : function(xhr) {
					// 해당 404 는 뜨면 안되는 에러지만, 충분한 테스팅 후 아래 alert 모두 적절한 예외 처리 필요
					if(xhr.status == '404')
						alert('등록되지 않는 버튼 : ' + pageParam);				
					ajaxError(xhr, error, msg);
				},
				dataType : 'html'
			})
		}

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

** 뒤로가기는 history 에 저장하지 않고 movepage function을 바로 태우면 됩니다.

$(window).bind("popstate", function(event) {
	  movePage(event.originalEvent.state);
    }else{ // 히스토리에 정보가 없을경우 메인화면으로 이동시키기.
    	var url = getContextPath();
    	$(location).attr('href',url);
    }
})

 

 

Uploaded by Notion2Tistory v1.1.0