This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-05-14
Channels
- # announcements (13)
- # aws (2)
- # babashka (17)
- # beginners (80)
- # biff (10)
- # cljs-dev (51)
- # cljsrn (6)
- # clojure (42)
- # clojure-australia (9)
- # clojure-boston (2)
- # clojure-europe (17)
- # clojure-sweden (3)
- # clojure-uk (53)
- # clojurescript (44)
- # code-reviews (2)
- # core-async (5)
- # cryogen (3)
- # cursive (32)
- # datahike (1)
- # datomic (11)
- # events (1)
- # fulcro (22)
- # helix (3)
- # honeysql (3)
- # leiningen (4)
- # lsp (30)
- # luminus (13)
- # malli (5)
- # off-topic (115)
- # other-languages (5)
- # pathom (10)
- # polylith (23)
- # re-frame (24)
- # reagent (10)
- # releases (2)
- # shadow-cljs (124)
Hi, I'm trying to get bulma tooltip to work. So far, I did this: • having a working re-frame cljs app with bulma included (some buttons... they work - so bulma works) • having bulma extensions installed by "npm install bulma-extensions" (seems to work, since slider and switch works) Trying the tooltip with the switch like this:
[:div.field
[:input#switchExample.switch {:data-tooltip "Tooltip Text" :type "checkbox" :name "switchExample" :on-change #(js/console.log (-> % .-target .-checked))}]
[:label {:for "switchExample"} "Switch example"]]
everything works - except the tooltip.
What do I do wrong? Thanks in advanceIt appears that bulma tooltips are a separate extension, so maybe you just need to import it separately? https://github.com/CreativeBulma/bulma-tooltip
@U020CEZ583H After checking this in a project, there is a bug with the tooltip operating on the checkbox switch input. It does not display. I can get it to display on the wrapping div with class "field" though...
(defn app []
[:div.wrapper
[:div "some text here"]
[:div "some more text here"]
[:div.field {:data-tooltip "Tooltip on Checkbox + Label"}
[:input {:id "switchColorDefault"
:class "switch"
:name "switchColorDefault"
:type "checkbox"
:default-checked true}]
[:label {:for "switchColorDefault"} "Switch example"]]
[:div "some text here"]
[:div "some more text here"]
[:button.button {:data-tooltip "Tooltip Text"
:class "has-tooltip-arrow"} "top tooltip"]])
Thanks a lot. Tried your snippet. It shows up - but without any tooltip. So I'm probably missing something with proper installation. I tried • npm install bulma-extensions • npm i -D @creativebulma/bulma-tooltip according to two different installation instructions that I found. https://github.com/CreativeBulma/bulma-tooltip and https://wikiki.github.io/ so, my package.json contains one of two dependencies - I tried with one alternative:
"dependencies": {
1. alternative "bulma-extensions": "^6.2.7",
"highlight.js": "10.7.1",
"react": "17.0.1",
"react-dom": "17.0.1"
},
"devDependencies": {
2. alternative: "@creativebulma/bulma-tooltip": "^1.2.0",
"shadow-cljs": "2.12.5"
}
and restarted shadow each time to create a new app.js. Did not help. Tooltip not showing up.
I thaught it may help to include the bulma-extensions.min.js directly in index.html - did not help either.
Now I found something: https://github.com/Wikiki/bulma-extensions/issues/74
--> Don't you forget to include JS file too and call `bulmaCalendar.attach()` method to instantiate the plugin ?
may there be an initialisation that I overlooked?
I'm assuming, I just have to include those two in the index.html
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
I do not add any additional js-file.@U020CEZ583H I've pushed my repo up, so you can look at how I ran it. Let me know if you have any questions. Good luck! https://github.com/AutoScreencast/bulma-app
cloned and ran: Works... The major difference is the mystyles.scss. I never worked with it. Did you write it by hand or was it created by some tools while installing bulma? Anyway: Thank you very much. Now I know the direction to search. Having read the docs again, I realized, that this is part of the installation. I interpreted it as a different installation opiton :face_with_rolling_eyes:
found a +sassc flag within the luminus template options - I'm quite sure, that will do what I need! Thanks a lot!
after having tried several lein-plugins, finally, it works. Im using [yogthos/lein-sass "0.1.10"]. It is self contained, easy to configure and the smallest setup pain in win10. Thank you very much!