????? ???? ?? ??? ??? ????? ?????? ??? ? ???? ? ?? ??? ?? ? ?????. ???? ????? ?? ????? ???? ??? ???? ?? ??? ????. ?? ??? ??? ?? ?? ??????? ???? ??? ?? ? ????.

???? ???? ???? ?? ?? ??? ????? ???? ??? ?? ???? ??? ? ??? ??? ???? ?? ????? ??????? ?? ??? ? ????.

??? ??? UI? ???? ?? ??? ???? ??? ?? ???????.

?? ??

?? ??? ???? ?? ?? ???? ?????, ?????, ??? ??? ?? ? ???? ??? ??? ?????. ?? ?? ??? ???? ?? ??? ?????? ???? ?? ?? ????. ?? ???? ??????? ?? ??? ? ??? ??? ?? ???? ????? ??? ??? ? ????.

??? UI

??? UI? ?? ??? ?? ??? ?? ??? ? ?? ?? ??? ?? ? ?? ??? ????????. ???? ?? ??? ??? ????. ??? UI? ?? ??? ????.

??? ???? ??? ??? ?? ??? ?? ?? ? ??, ????? ?? ? ?? ? ?? ??? ????? ??? UI? ?? ?????? ???? ???.

? ?? ???? ?? ?? ??

1. React js? ?? ?? ??
2. ??????? ?? ???? ??
3. ???? Node js? ???? ??? ???(React ??????? ?????)
4. ??? ????? Chrome? ?? ? ???????.

???UI? ?????

React js ??????? Floating UI? ???? ???. ? ??? ???? ??? ? ? ????.

npm install @floating-ui/react

??? UI ??????? ?? ??? ???? ???. ??? ??? ???? ??? ?? ?? ? ????.

`
?? {
????
useFloating,
useInteractions
???
???
????,
} '@floating-ui/react'??;

`

Floating ?? ??

`
const {
??: Calendar1Refs,
?? ???: Calendar1FloatingStyles,
????: Calendar1Context,
} = useFloating({
??: isOpen1,
onOpenChange: setIsOpen1,
??: '??',
????: [
???({
fallbackPlacements: ['right'],
}),

offset({ mainAxis: 20, crossAxis: 70 }),
],
});
`

??

?? ?? ??? ?? ??? ?? ??? ? ????. ??? ??? ??? ??? ???.

<i
      className="fa-light fa-calendar cursor-pointer text-gray-500"
            ref={calendar1Refs.setReference}
           ></i>

??? ??? ??? ???.

{isOpen1 && (
            <div
             className="absolute z-10 bg-white"
             ref={calendar1Refs.setFloating}

            >
             <Calendar onChange={handleSelectDate1} />
            </div>
           )}The difference here is that our tooltip reference has “setReference” while our tooltip has “setFloating”. This will enable them to be connect, making sure that the tooltip floats around it`s reference.

??? ???

floatingStyles? ?? ??? ???? ??? ??(?: ??)? ??? ??? ??? ???? CSS ???? ??? ?????.

{isOpen2 && (
          <div
           className="z-[9999]"
           ref={calendar1Refs.setFloating}
          >



<p><strong>Context</strong></p>

<p>In Floating UI, context (like calendar1Context in this case) provides a way to manage and share state and interactions across multiple hooks. This helps us to share events like click, hover etc. It also helps to dismiss the interactions seamlessly, ensuring that each tooltip or floating element behaves consistently.<br>
</p>

<pre class="brush:php;toolbar:false">const click1 = useClick(calendar1Context);
 const dismissCalendar1ToolTip = useDismiss(calendar1Context);

??

?? ??? ??? ???? ?? ?? ?????. ?? ?? ??? ?? ??? ???? ??? ???? ???? ? ??? ???.

?? ???? ??? ??? ??? ?? ? ??? ???? false? useState? ?????. ? useState? ??? ?? ?? ??? ??? ?????.

const [isOpen, setIsOpen] = useState(false);

onOpenChange

? ??? setIsOpen ?? ?????? ? ??? ???. ??? ???? ???? ????? ???? ??? isOpen? false ?? true? ???? ? ??? ?????.

??

?? ??? ???? ??? ??? ??? ???? ? ??? ???. ??? ??? ?? ? ??? ??? ? ????.

1. ??
2. ??
3. ?? ??
4. ??
5. ?? ?
6. ?? ??
7. ?????
8. ??? ?
9. ??? ??
10. ??
11. ???
12. ??? ??

???

???? ?? ??? ?? ?? ????? ??? ???? ??? ???? ??? ??? ??? ??? ?????? ?????. ??? ?? ??? ???? ??? ?? ??(['bottom-end'])? ???? ??? ????? ?????. ?? ??? ??? ?? ??? ??? ??? ? ????.

middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

    ],

???

? ????? ?? ??? ??? ?? ??? ??? ????. mainAxis: 20? ?? ??(? ?? ?? ??)? 20px ??? ???? ??, crossAxis: 50? ?? ?? ?? 50px ???? ?????.

middleware: [
   offset({ mainAxis: 20, crossAxis: 50 }),
  ],

??? ??? ????

const [isOpen, setIsOpen] = useState(false);
 const {
  refs: calendar1Refs,
  floatingStyles: calendar1FloatingStyles,
  context: calendar1Context,
 } = useFloating({
  open: isOpen,
  onOpenChange: setIsOpen,
  placement: 'bottom-end',

  middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

   offset({ mainAxis: 20, crossAxis: 50 }),
  ],
 });

 const click = useClick(calendar1Context);
 const dismissImageToolTip = useDismiss(calendar1Context);

 const {
  getReferenceProps: calendar1TooltipReference,
  getFloatingProps: calendar1TooltipFloatingProps,
 } = useInteractions([click, dismissImageToolTip]);

??

?? ???? ??? ? ??? ?????.

???? ?? ??? ??? ?? ??? ??? ???? ?? ??? ? ? ????. ??? ??? fallbackPlacements? ??? ???????.

??

??? UI? React ???????? ?? ??? ???? ???? ??? ??? ?????. ?? ?? ?? ? ??? ??? ?? ??? ???? ??? ??? ?? ???? ???? ??? ????? ??????? ??? ??? ????? ?? ??? ?? ? ????.

??? ?? ?? ??? ??? ?????. refs, floatStyles, context, ?? ??? ?? useState, onOpenChange, ??, ??? ? ???.

? ???? ??? ?? React ???????? ???? ???? ??? ???? ??? ???? ??? ?? ?????. ??? ??? ????? ???? ????? ??? ?? ?? ??? ??????.

??? ?? ?

? ??? ??? UI? ???? ?? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!