본문바로가기

Component

ToolTip

Basic

Tooltip은 element에 마우스가 포커싱 되었을 때 설명이나 간단한 도움말을 보여주는 컴포넌트입니다. class="Tooltip"

Alopex UI에서 제공하는 ToolTip 컴포넌트를 선언하는 방식에는 두가지가 있습니다.

title 속성값 이용

이 방식은 title 속성값을 가진 모든 html 태그에 적용할 수 있습니다. 이 경우, ToolTip은 텍스트를 가지고 있는 형태를 가집니다.
아래 예제처럼 title 속성을 가진 HTML 엘리먼트를 선택한 이후 tooltip 함수를 실행합니다.

//title 속성값을 가진 모든 html 태그에 적용
$('[title]').tooltip();

아래 예제에서는 "WHO"와 "Alopex UI" 부분이 title 속성을 가진 태그의 내용입니다.

WHO was founded in 1948. Alopex UI
<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
<a title="World No.1 HTML5 UI Framework">Alopex UI</a>
$(document).ready(function() {
	$('[title]').tooltip();
});

HTML 마크업 이용

ToolTip의 마크업을 따로 구성할 수 있습니다.

button
<button class="Button">click</button>
<div class="Tooltip">button</div>

기본적으로 hover가 제대로 동작하지 않는 터치 기반 디바이스에서도 지원됩니다. 모바일 기기의 경우, base element를 한번 클릭하면 툴팁이 화면에 열리고, 다른 영역을 클릭할 시 자동으로 닫힙니다.

Attributes

data-activate

  • Type: {string}
    • 툴팁의 타겟 element 상태에 따라 사용여부를 설정합니다.
    • 'all' (default) : 모든 상태에서 툴팁 활성화
    • '' || null : 툴팁 비활성화
    • 'normal' : 활성화 상태인 컴포넌트에만 툴팁 표현
    • 'disabled' : disabled 상태인 컴포넌트에만 툴팁 표현
ShowTooltip


<input id="activateText" class="Textinput" data-disabled="true">
<div id="activateTooltip" class="Tooltip" data-position="top" data-show-disabled="true" data-create-wrapper="true" data-show-type="all">ShowTooltip</div>
<button class="Button" id="activateBtn">setEnabled</button>
<br><br>
<button class="Button" id="activateAll">all</button>
<button class="Button" id="activateNormal">normal</button>
<button class="Button" id="activateDisabled">disabled</button>
<button class="Button" id="activateNull">null</button>
$('#activateBtn').on('click', function() {
	if ($("#activateText").getEnabled() === false) {
		$("#activateText").setEnabled(true);
	} else {
		$("#activateText").setEnabled(false);
	}
});
$('#activateAll').on('click', function() {
	$('#activateTooltip').setOption('activate', 'all');
});
$('#activateNormal').on('click', function() {
	$('#activateTooltip').setOption('activate', 'normal');
});
$('#activateDisabled').on('click', function() {
	$('#activateTooltip').setOption('activate', 'disabled');
});
$('#activateNull').on('click', function() {
	$('#activateTooltip').setOption('activate', null);
});

data-animation

  • Type: {string}
    • ToolTip이 나타나고 사라질 때의 animation 효과를 지정합니다.
    • 'slide' | 'fade'

data-animationtime

  • Type: {number}
    • animation의 duration을 지정합니다.
    • 300(default): animation 수행 시간이 300ms로 설정 됩니다.
slide tooltip


fade tooltip!
<button class="Button">slide</button>
<div class="Tooltip" data-animation="slide" data-position="right">slide tooltip</div>
<button class="Button">fade</button>
<div class="Tooltip" data-animation="fade" data-position="right">fade tooltip!</div>
</div>

data-base

  • Type: {string}
    • jquery 셀렉터 string을 입력합니다.
    • ToolTip 컴포넌트의 베이스가 되는 HTML element를 지정하는 속성입니다.

      여러 개의 element를 지정하는 selector의 사용은 오작동을 일으킬 수 있습니다. (ex. "[data-type]")

아래 예제처럼 div 태그로 ToolTip의 마크업을 작성하고 data-type 속성을 지정합니다.

textinput
radio
checkbox
<input id="textinput" type="text" class="Textinput">
<input id="radio" type="radio" class="Radio">
<input id="checkbox" type="checkbox" class="Checkbox">

<div class="Tooltip" data-base="#textinput">textinput</div>
<div class="Tooltip" data-base="#radio">radio</div>
<div class="Tooltip" data-base="#checkbox">checkbox</div>


이 방식을 이용하여 다양한 html element에 ToolTip을 추가할 수 있습니다. 기본적으로 ToolTip div element 바로 이전 HTML element를 ToolTip base로 지정합니다.

ToolTip 이전에 base를 지정하지 못할 경우, 위 예제와 같이 data-base 속성을 이용하여 ToolTip base를 지정할 수 있습니다.

data-close-callback

  • Type: {string}
    • ToolTip이 닫힐 때 호출되는 콜백 함수명을 지정합니다.
툴팁
<button class="Button">콜백 함수</button>
<div class="Tooltip" data-open-callback="openCallback" data-close-callback="closeCallback">툴팁</div>
function openCallback() {
	alert('opened');
}
function closeCallback() {
	alert('closed');
}

data-close-trigger

  • Type: {string}
    • ToolTip을 닫을때 사용할 DOM 이벤트를 string 형태로 지정합니다.
    • 'mouseleave' (default) : 마우스가 mouseleave 상태에서 툴팁이 비활성화 되도록 설정합니다.
click
<button class="Button">click close</button>
<div class="Tooltip" data-close-trigger="click" data-position="right">click</div>

data-create-wrapper

  • Type: {boolean}
    • 기존 개발된 마크업 변경없이 disabled 컴포넌트에 tooltip을 사용하려면 해당 attribute값을 true로 설정합니다.

      true 설정 시 target 컴포넌트가 span태그로 감싸집니다. 동적으로 생성된 span wrapper의 class는 Tooltip-wrapper 입니다.

Disabled
<input class="Textinput" data-disabled="true">
<div id="cwTooltip" class="Tooltip" data-position="right" data-show-disabled="true" data-create-wrapper="true">Disabled</div>
// API 사용
$('#cwTooltip').setOptions({
	createwrapper: true,
	showdisabled: true
});
$('#cwTooltip').refresh();

data-margin

  • Type: {number}
    • 툴팁과 타겟 element 사이에 margin값을 설정합니다.
    • 10 (default)

data-open-callback

  • Type: {string}
    • ToolTip이 열릴 때 호출되는 콜백 함수명을 지정합니다.

data-open-trigger

  • Type: {string}
    • ToolTip을 열때 사용할 DOM 이벤트를 string 형태로 지정합니다.
    • 'mouseenter' (default) : 마우스 mouseenter 상태에서 툴팁이 활성화 되도록 설정합니다.
click
<button class="Button">click open</button>
<div class="Tooltip" data-open-trigger="click" data-position="right">click</div>

data-position

  • Type: {string}
    • tooltip의 위치를 지정하는 속성입니다. base 엘리먼트를 기준으로 정해지는 위치입니다.
    • 'top', 'bottom', 'left', 'right', 'top|left', 'top|right', 'botton|left', 'bottom|right'

      이 속성이 지정되지 않는 경우에는 bottom > top > left > right 순으로 화면을 벗어나지 않는 위치가 지정됩니다.

툴팁의 위치를 data-position 속성을 이용하여 지정할 수 있습니다.
data-position 속성을 지정하지 않을 경우, bottom > top > right > left 순으로 위치값이 지정됩니다.

tooltiop on top
tooltiop on bottom
tooltiop on Topleft
tooltiop on Bottomright


                         
tooltiop on left
tooltiop on right
<button class="Button">tooltip on top</button>
<div class="Tooltip" data-position="top">tooltiop on top</div>
<button class="Button">tooltip on bottom</button>
<div class="Tooltip" data-position="bottom">tooltiop on bottom</div>
<button class="Button">tooltip on Topleft</button>
<div class="Tooltip" data-position="top|left">tooltiop on Topleft</div>
<button class="Button">tooltip on Bottomright</button>
<div class="Tooltip" data-position="bottom|right">tooltiop on Bottomright</div>
<br/><br/>

<button class="Button">tooltip on left</button>
<div class="Tooltip" data-position="left">tooltiop on left</div>
<button class="Button">tooltip on right</button>
<div class="Tooltip" data-position="right">tooltiop on right</div>

data-show-disabled

  • Type: {boolean}
    • tooltip 컴포넌트는 disabled 상태일때 동작하지 않습니다. disabled 컴포넌트에서 사용할때 아래와 같이 사용할 수 있습니다.

      단, disabled 컴포넌트에 tooltip을 사용하려면 span 태그로 해당 컴포넌트를 감싸야합니다.

Disabled
<span>
	<input class="Textinput" data-disabled="true">
</span>
<div class="Tooltip" data-position="right" data-show-disabled="true">Disabled</div>
// API 사용
$('#sdTooltip').setOption('showdisabled', true);

data-text

  • Type: {string}
    • 툴팁의 문구를 설정하는 옵션입니다.
    • null (default) : 기본적으로 마크업에 설정된 문구를 보여줍니다.
<input type="text" class="Textinput">
<div id="textTooltip" class="Tooltip" data-text="툴팁 입니다"></div>
<button id="textchange" class="Button">툴팁 문구 수정</button>
<button id="reset" class="Button">초기화</button>
$('#textchange').on('click', function() {
	$('#textTooltip').setOption('text', '툴팁 수정');
});
$('#reset').on('click', function() {
	$('#textTooltip').setOption('text', '툴팁 입니다');
});

data-tooltip-trigger

  • Type: {string}
    • ToolTip을 trigger하는 DOM 이벤트를 string 형태로 지정합니다.
    • 'default' (default) : 마우스 호버 상태에서 툴팁이 활성화 되도록 설정합니다.
    • ex) 'click' , 'dblclick'...
click
double-click
<button class="Button">click tooltip</button>
<div class="Tooltip" data-tooltip-trigger="click" data-position="right">click</div>

<button class="Button">double-click tooltip</button>
<div class="Tooltip" data-tooltip-trigger="dblclick"  data-position="right"> double-click</div>

Options

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

단, createwrapper, showdisabled 옵션은 동적으로 설정 후 refresh API를 호출 해야합니다.

activate

animation

animationtime

closecallback

closetrigger

createwrapper

cssstyle

  • Type: {object}
    • 툴팁에 적용할 CSS object값을 입력합니다.

opencallback

opentrigger

tooltiptrigger

{
	color: 'red'
	...
}

margin

opencallback

opentrigger

position

showdisabled

text

tooltiptrigger

Functions

.close(callback)

ToolTip을 닫는 함수입니다.

  • Parameters
    • callback {function} Optional
      • Tooltip이 닫힌 이후 호출되는 콜백 함수

.getOption(key)

ToolTip에 설정된 옵션값을 가져올 수 있습니다.

  • Parameters

    • key {string}
      • Options에 설정된 key 값을 입력합니다.
  • Return

    • 옵션에 설정된 값이 리턴됩니다.
//옵션에 설정된 값이 리턴됩니다.
$('#tooltip').getOption('activate');

.getOptions()

ToolTip에 설정된 옵션값을 모두 가져올 수 있습니다.

  • Return {object}
    • object
      • Tooltip에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
//ToolTip에 설정된 모든옵션값을 가져옵니다.
$('#tooltip').getOptions();

.open(callback)

ToolTip을 표시하는 함수입니다.

  • Parameters
    • callback {function} Optional
      • Tooltip이 생성된 이후 호출되는 콜백 함수

.refresh()

타깃 element 상태를 동적으로 바꿀 때 Tooltip을 재설정하는 API입니다.

createwrapper, showdisabled 옵션을 동적으로 설정시 사용합니다.

Refresh 툴팁
<input id="refreshText" type="text" class="Textinput">
<div id="refreshTooltip" class="Tooltip">Refresh 툴팁</div>
<button class="Button" id="setEnabledBtn">setEnabled</button>
$('#setEnabledBtn').on('click', function() {
	var $text = $("#refreshText");
	if ($text.getEnabled() === false) {
		$text.setEnabled(true);
	} else {
		$text.setEnabled(false);
		var $tooltip = $('#refreshTooltip');
		if ($tooltip.getOption('showdisabled') !== true) {
			$tooltip.setOptions({
				createwrapper: true,
				showdisabled: true
			});
		}
		$tooltip.refresh();
	}
});

.setOption(key, value)

ToolTip에 동적으로 옵션을 설정합니다.

  • Parameters
    • key {string}
      • Options에 설정된 key 값을 입력합니다.
    • value
      • 옵션에 설정할 값을 입력합니다.
//ToolTip에 동적으로 옵션을 설정합니다.
$('#tooltip').setOption('opentrigger', 'click');

.setOptions(options)

ToolTip에 동적으로 옵션을 설정합니다.

  • Parameters
    • options {object}
      • Tooltip에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
$('#tooltip').setOptions({
	opentrigger: 'click',
	activate: 'disabled'
});

.toggle(callback)

ToolTip의 상태를 전환하는 함수입니다. ToolTip이 열린 상태면 close 함수를, 닫힌 상태에는 open 함수를 호출합니다.

  • Parameters
    • callback {function} Optional
      • Tooltip이 닫히거나 열릴때 호출되는 콜백 함수

function tooltip
<button id="open" class="Button">open</button>
<button id="close" class="Button">close</button>
<button id="toggle" class="Button">toggle</button>
<hr>
<input type="text" class="Textinput">
<div id="tooltip1" class="Tooltip">function tooltip</div>
</div>
$('#open').on('click', function() {
	$('#tooltip1').open();
});
$('#close').on('click', function() {
	$('#tooltip1').close();
});
$('#toggle').on('click', function() {
	$('#tooltip1').toggle();
});

Extra Example

Custom Styling

예제 1 :
  • Thousand Years
    List Description
  • Spicytunas
    spicytunas.com
예제 2 :
Address 253 Withersppon Street Princeton, NH
Family Role Adult
Email house@exmaple.com
Member Status Member
Marital Status Single
Age 42
.List.customlist1, .List.customlist1 li{background:transparent;}
.List.customlist1, .List.customlist1 * {color:#bbb;border:0;}
.Tooltip.bg1 { background: #F5F3C9; padding:20px;color:#000;}
.Tooltip.bg1:before {border-bottom: 6px solid #F5F3C9;}
.info {margin-left:15px;}
.info td:first-child {font-weight:bold;}
<span>예제 1 : </span>
<button class="Button">list in tooltip</button>
<div class="Tooltip" style="width:200px;">
	<ul class="List customlist1">
		<li style="padding:0px;">
			<img src="/development/component/tooltip/tooltipEx1_1.jpg">
			<div><strong>Thousand Years</strong></div>
			<div>List Description</div>
		</li>
		<li style="padding:0px;">
			<img src="/development/component/tooltip/tooltipEx1_2.jpg">
			<div><strong>Spicytunas</strong></div>
			<div>spicytunas.com</div>
		</li>
	</ul> 
</div>

<span>예제 2 : </span>
<button class="Button">table in tooltip</button>
<div class="Tooltip bg1"  style="width:auto;">
	<div style="display:-webkit-box;">
		<img style="height:100px" src="/development/component/tooltip/tooltipEx2.jpg">
		<table class="info">
			<colgroup>
				<col style="width:30%;"/>
				<col />
			</colgroup>
			<tr>
				<td>Address</td>
				<td>253 Withersppon Street Princeton, NH</td>
			</tr>
			<tr>
				<td>Family Role</td>
				<td>Adult</td>
			</tr>
			<tr>
				<td>Email</td>
				<td><a>house@exmaple.com</a></td>
			</tr>
			<tr>
				<td>Member Status</td>
				<td>Member</td>
			</tr>
			<tr>
				<td>Marital Status</td>
				<td>Single</td>
			</tr>
			<tr>
				<td>Age</td>
				<td>42</td>
			</tr>
		</table>
	</div>
</div>