FullCalendar Title 툴팁 설정

v5에서의 툴팁 구현

<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

 2.x대 버전의 "popper.js"와 "tooltip.js"의 새 버전인 "tippy.js" 두 스크립트 파일 등록

(추후 해당 URL에 직접 들어가서 각 파일들을 직접 다운받아서 사용해야한다.)

 

 

FullCalendar의 eventDidMount 함수 옵션을 통해 tippy 메소드 호출 후 툴팁 세팅.

eventDidMount: function(info) {
tippy(info.el, {
    content:  info.event.title//이벤트 타이틀을 툴팁으로 가져옵니다. 
    //content:  info.event.extendedProps.description,//이벤트 디스크립션을 툴팁으로
    });
},

 

툴팁 디자인 및 기타 옵션 설정하기

eventDidMount: function(info) {
var title = info.event.title;
	if (title.length > 20){
		tippy(info.el, {
			content: title 
			,placement: 'bottom' //툴팁 방향
			,theme: 'yellow' //css테마 설정된 데이터 값
			,arrow : false //툴팁에서 말풍선 모양처럼 화살표 출력여부
		});
    }
}

 

css 디자인 설정

/* yellow 테마 제작 */ 
.tippy-box[data-theme~='yellow'] { background-color: #fffadf; color: black; } 

.fc-event-title.fc-sticky{
    overflow:hidden;
    text-overflow:ellipsis;
}

 

[툴팁] tooltip, 쉽고 쉽게 만들기: tippy.js

 

All Props