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>
|
