guide:component:common:tooltipbox_basic [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== tooltipbox 속성 가이드======

tooltipbox 속성에 대한 예시 화면이다.

tooltipbox 속성은 확장 도움말로 나타날 텍스트 설정한다.

tooltipbox 속성은 단순 문자열 또는 JSON 문자열로 설정한다.

JSON 문자열의 title, content는 문자열 또는 문자열 배열로 설정한다.

===== 예시 =====

템플릿 위치: /HTML5/COMPONENT/COMMON/tooltipbox_basic

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/COMMON/tooltipbox_basic.xml|tooltipbox_basic.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/COMMON/tooltipbox_basic.js|tooltipbox_basic.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/COMMON/tooltipbox_basic|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/COMMON/tooltipbox_basic"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
function screen_on_load()
{

}

function btn_settooltipbox_on_mouseup(objInst)
{
	var arrTitle, arrCotent, objTooltipBox;

	arrTitle = [];
	arrTitle.push("<b>ID 규칙</b>");

	// 문자열 내에 큰 따옴표가 있어야 하는 경우, 역슬래시 문자를 이용하여 이스케이프 처리해야 함.

	arrCotent = [];
	arrCotent.push("<p>\"ID 상세 규칙\"은 아래와 같습니다.</p>");
	arrCotent.push("<ol>");
	arrCotent.push("<li><span style=\"color:red;\">최소 8자리 이상</li>");
	arrCotent.push("<li>영어 대문자, 소문자, 숫자, 특수문자 중 2종류 조합</li>");
	arrCotent.push("</ul>");

	objTooltipBox = {
		// placement, horz_align, vert_align, width는 필요시에만 지정
		/*
		placement: 1, 	// 0:left, 1:right, 2:top, 3:bottom
		horz_align: 0,	// 0:left, 1:center, 2:right
		vert_align: 1,	// 0:top, 1:center, 2:bottom
		width: 400,	   // 최대 너비
		*/
		title: arrTitle,	// 타이틀 문자열 배열 또는 문자열 지정
		content: arrCotent  // 내용 문자열 배열 또는 문자열 지정
	};

	fldTooltipBox.settooltipbox(factory.jsonstringify(objTooltipBox));
	// factory.consoleprint(fldEffect.gettooltipbox());
}

function btn_settabitemtooltipbox_on_mouseup(objInst)
{
	var objTooltipBox = {
		"title": "동적 툴팁박스",	// 타이틀 문자열
		"content": [
			"settabitemtooltipbox API를 통해서 설정합니다. ",
			"조건에 따라 다양하게 설정이 가능합니다."
		]
	};

	// 탭 아이템별 툴팁박스 정보 설정
	tabTooltipBox.settabitemtooltipbox(1, factory.jsonstringify(objTooltipBox));
	factory.consoleprint(tabTooltipBox.gettabitemtooltipbox(1));
}

function btn_setheadertooltipbox_on_mouseup(objInst)
{
	var objTooltipBox = {
		"title": "동적 툴팁박스",	// 타이틀 문자열
		"content": [
			"setheadertooltipbox API를 통해서 설정합니다. ",
			"조건에 따라 다양하게 설정이 가능합니다."
		]
	};

	// 그리드 헤더 아이템별 툴팁박스 정보 설정
	grdTooltipBox.setheadertooltipbox(1, 0, factory.jsonstringify(objTooltipBox));
	factory.consoleprint(grdTooltipBox.getheadertooltipbox(1, 0));
}

function btn_setitemtooltipbox_on_mouseup(objInst)
{
	var objTooltipBox = {
		"title": "그리드 아이템 툴팁박스",	// 타이틀 문자열
		"content": [
			"setitemtooltipbox API를 통해서 설정합니다. ",
			"조건에 따라 다양하게 설정이 가능합니다."
		]
	};

	// 그리드 데이터 아이템별 툴팁박스 정보 설정
	grdTooltipBox.setitemtooltipbox(1, 0, factory.jsonstringify(objTooltipBox));
	factory.consoleprint(grdTooltipBox.getitemtooltipbox(1, 0));
}
</sxh>