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."])]))
)
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."])])))
)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 🙂
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]))I'm grateful for your help and the time you've dedicated. Thank you so much! Wishing you a wonderful day. 😊
no problem