[Bootstrap] 텍스트에 tooltip 이미지 띄우기

페이지 정보

루루아빠 4,212 2017.03.25 12:07

평점

  • 평점 : 0점 (0명 참여)

본문

텍스트에 tooltip 이미지 띄우기
※ 예제
부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다.
상기 텍스트 중 부트스트랩 부분에 마우스를 가져다 보자

상기 예제로 설명을 하자면 부트스트랩 부분을 아래 소스로 감싼다.

<span data-html="true" data-placement="right" data-toggle="tooltip" title="<img src='이미지 주소' />"><span style="color:#8e44ad;">부트스트랩</span></span>
그리고 스크립트를 추가한다.

<script>
  $(document).ready(function(){
    $('span[data-toggle=tooltip]').tooltip();
  });
</script>
이미지 넓이만큼 tootip의 넓이를 조정하자

<style>
.tooltip-inner {max-width: 이미지 넓이px}
</style>
만약 이미지 넓이가 200px 이하라면 tooltip의 기본값 최대 넓이가 200px이기에 스타일을 추가할 필요가 없다
위 예제를 응용해서 여러가지 html 태크에 부트스트랩 툴팁을 활용할 수 있다.
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,290,224
레벨 96
경험치 1,387,681

Progress Bar 69%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요