웹솔루션개발 26년 노하우! 해피CGI의 모든것

Floating UI는 Tooltip, Popover, Dropdown Menu, Context Menu, Select Box 등 화면 위에 떠 있는 다양한 UI 요소의 위치를 자동으로 계산하고 배치해주는 최신 JavaScript 라이브러리입니다. 기존 Popper.js의 후속 개념으로 개발되었으며 최근 React, Vue, Vanilla JavaScript 환경에서 많이 사용되고 있습니다. 스크롤 영역 안쪽이나 모바일 화면, 브라우저 가장자리 등 복잡한 환경에서도요소가 화면 밖으로 잘리지 않도록 자동으로 위치를 보정해주며 Tooltip, Dropdown, Popover 같은 인터페이스를 매우 안정적으로 구현할 수 있습니다. 특히 화면 충돌 감지(Collision Detection), 자동 방향 변경(F..

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;backgrou..

- 작동 원리Zebra Tooltips는 간단하면서도 똑똑하고 시각적으로 매력적인 툴팁을 만드는 가볍고 높은 사용자 정의성을 갖춘 크로스 브라우저 jQuery 플러그인으로, 아름다운 전환 효과를 제공하고 다양한 구성 옵션을 제공합니다. 모양은 JavaScript 및/또는 CSS를 통해 쉽게 사용자 정의할 수 있습니다. 또한, 도구 설명은 부모 요소에 대해 왼쪽, 가운데 또는 오른쪽에 정렬할 수 있습니다. Zebra Tooltips는 이미지를 전혀 사용하지 않으며(모든 것은 CSS에서 처리됨) 모든 고급 기능을 지원하지 않는 브라우저에서도 문제없이 작동합니다. 또한 앵커 태그뿐만 아니라 모든 요소에 툴팁을 첨부할 수 있습니다!- 라이센스MIT- 사용 방법1. 페이지에 필요한 CSS 파일을 포함합니다.2. ..

좌측툴팁과 하단툴팁이 있습니다. css 수정으로 방향을 변경할 수 있습니다. html 파일에서 간단히 방향을 호출해서 사용이 가능합니다.