# Floating UI - 툴팁/팝업/드롭다운 포지셔닝 라이브러리

> Clean Markdown view of GeekNews topic #16139. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16139](https://news.hada.io/topic?id=16139)
- GeekNews Markdown: [https://news.hada.io/topic/16139.md](https://news.hada.io/topic/16139.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-08-02T10:30:02+09:00
- Updated: 2024-08-02T10:30:02+09:00
- Original source: [floating-ui.com](https://floating-ui.com/)
- Points: 22
- Comments: 2

## Summary

이 자바스크립트 라이브러리는 모든 플로팅 요소를 배치하고 인터랙션을 생성하는 데 유용하며, Smart Anchor 포지셔닝을 통해 다른 요소와의 충돌을 피하면서 시야에 유지됩니다. React 인터랙션을 통해 툴팁, 팝오버, 셀렉트 메뉴 등 다양한 플로팅 UI를 구축할 수 있습니다. 또한, Tree-shakeable 및 Platform-agnostic 특성으로 다양한 플랫폼과 호환됩니다.

## Topic Body

- 모든 플로팅 요소를 배치하고 인터랙션을 생성하는 자바스크립트 라이브러리  
- Smart Anchor 포지셔닝 : 다른 요소 옆에 고정하고 충돌을 피하여 시야에 유지   
  - Placement, Shift, Flip, Size, Arrow, Virtual 등 지원   
- React 인터랙션으로 자신만의 플로팅 UI 구축  
  - 툴팁, 팝오버, 셀렉트 메뉴, 콤보박스, 드롭다운 메뉴, 다이얼로그   
- Tree-shakeable & Platform-agnostic  
  - 웹용 공식 바인딩, React DOM, React Native 및 Vue 외에도 `<canvas>` 도 지원

## Comments



### Comment 27899

- Author: ibare77
- Created: 2024-08-09T16:35:17+09:00
- Points: 1

이 작은 라이브러리가 배포 444번, 기여자 101명인게 흥미롭네요 ^^

### Comment 27748

- Author: laeyoung
- Created: 2024-08-02T12:14:51+09:00
- Points: 1

와, 귀엽네요 😊