[해피CGI][cgimall] 화살표로 표시되는 Smart jQuery 툴팁 - HoverMe

HoverMe는 스마트 화살표 위치를 사용하여 애니메이션이 적용된 사용자 정의 툴팁을 만드는 가벼운 jQuery 플러그인입니다. 

툴팁 크기나 요소 크기에 관계없이, 마우스를 올려놓은 요소의 중앙을 직접 가리키도록 화살표 배치를 자동으로 계산합니다.

 

# 라이센스 : MIT



# 사용방법 


1.  HEAD 에 CSS 추가 합니다. 
  기본적으로 hoverMe.css 만 있어도 됩니다. 

<link rel="stylesheet" href="hoverMe.css">

<style>

html,* { font-family: 'Inter'; }

body { background-color: #fafaf8; line-height:1.6;}

    .lead { font-size: 1.5rem; font-weight: 300;background: linear-gradient(to right, #000000 0%, #000000 50%,#999999 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color:transparent; }

    .container { margin: 20px auto; max-width: 960px; }

h1 {

    background: linear-gradient( 120deg, #bd34fe 30%, #41d1ff );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

button {

    margin: 20px;

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

}

.wide-button {

    width: 200px;

}

.narrow-button {

    width: 200px;

}

</style>

2. 라이브러리 호출 

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="hoverMe.js"></script>

3. 요소와 툴팁의 속성을 정합니다. 

<button data-title="Tooltip Content A" data-position="top" data-color="#059669" data-text-color="#fff">Hover Me</button>

<button data-title="Tooltip Content B" data-position="bottom" data-color="#1f2937" data-text-color="#f9fafb">Hover Me</button>

<button data-title="Tooltip Content C" data-position="left" data-color="#10b981" data-text-color="#fff">Hover Me</button>

<button data-title="Tooltip Content D" data-position="right" data-color="#059669" data-text-color="#fff">Hover Me</button>

<button data-title="Tooltip Content E" data-color="#059669" data-text-color="#fff">Hover Me</button>

<button data-title="Tooltip Content F" data-color="#1f2937" data-text-color="#f9fafb">Hover Me</button>

<button data-title="Tooltip Content G" data-color="#10b981" data-text-color="#fff">Hover Me</button>

4. 함수를 호출하여 적용 합니다. 

<script>

$("[data-title]").HoverMe({

    position: 'top',

    color: '#333',

    textColor: '#fff',

    borderRadius: '4px',

    fontSize: '14px',

    padding: '6px 10px'

});

</script>