• 구글 계정 로그인

balloon 툴팁

페이지 정보

profile_image
작성자 LJM
댓글 0건 조회 738회 작성일 18-10-10 21:31

본문

CSS파일

<link href='https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">

 

사용법

//위,아래,좌,우

<button data-balloon="Whats up!" data-balloon-pos="up">Hover me!</button>

<button data-balloon="Whats up!" data-balloon-pos="left">Hover me!</button>

<button data-balloon="Whats up!" data-balloon-pos="right">Hover me!</button>

<button data-balloon="Whats up!" data-balloon-pos="down">Hover me!</button>

 

// 내용이 많이 들어갈때

<button data-balloon-length="small" data-balloon="Hi." data-balloon-pos="up">Hover me!</button>

<button data-balloon-length="medium" data-balloon="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done." data-balloon-pos="up">I'm a medium tooltip.</button>

<button data-balloon-length="large" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a large tooltip</button>

<button data-balloon-length="xlarge" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a Xlarge tooltip</button>

<button data-balloon-length="fit" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">My width will fit to element</button>

 

//항상보여주기

<button data-balloon-visible data-balloon="I am always visible!" data-balloon-pos="up">Always visible!</button>

 

// 아이콘이나 특수문자

<button data-balloon="HTML special characters: &#9787; &#9986; &#9820;" data-balloon-pos="up">Hover me!</button>

<button class="font-awesome" data-balloon="Font Awesome: &#xf030; &#xf133; &#xf1fc; &#xf03e; &#xf1f8;" data-balloon-pos="up">Hover me!</button>


첨부파일

댓글목록

등록된 댓글이 없습니다.