reagent

Can 2023-11-13T12:03:51.087959Z

Hello, I trying to create a basic popup, but its not working. When I hover my mouse over the text nothing happens. Is it wrong? How can I create a basic popup functionality?

#?(:cljs (defn popover [text]
           [:div.popover text]))

#?(:cljs
   (defn app []
     (let [show-popover? (reagent/atom false)]
       [:div
        [:a {:on-mouse-enter #(reset! show-popover? true)
             :on-mouse-leave #(reset! show-popover? false)}
         "Hover me to show popover"]
        (when @show-popover?
          [popover "This is the popover content."])]))
   )

vanelsas 2023-11-13T12:21:19.896379Z

You probaby need to update the R/atom inside the render function so that it can be rerendered when the value of the R/atom changes. Something like this:

#?(:cljs (defn popover [text]
           [:div.popover text]))

#?(:cljs
   (defn app []
     (let [show-popover? (reagent/atom false)]
(fn []
       [:div
        [:a {:on-mouse-enter #(reset! show-popover? true)
             :on-mouse-leave #(reset! show-popover? false)}
         "Hover me to show popover"]
        (when @show-popover?
          [popover "This is the popover content."])])))
   )

Can 2023-11-13T12:25:14.565559Z

it worked thanks :)) How can I add style to pop up? can you show me mini example if possible. So I can update it later 🙂

vanelsas 2023-11-13T12:28:15.954909Z

There are multiple ways to do it. Perhaps the simplest way for now is to add some inline css stying to your popover like this

#?(:cljs (defn popover [text]
           [:div.popover {:style {:background-color "green"
 ;; etc, add any css that you may need
 }}
text]))

Can 2023-11-13T12:30:44.925789Z

I'm grateful for your help and the time you've dedicated. Thank you so much! Wishing you a wonderful day. 😊

vanelsas 2023-11-13T12:39:28.909019Z

no problem