reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
Benno Löffler 2021-05-14T07:43:03.234900Z

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 advance

tomrbowden 2021-05-14T12:06:29.235900Z

It appears that bulma tooltips are a separate extension, so maybe you just need to import it separately? https://github.com/CreativeBulma/bulma-tooltip

Benno Löffler 2021-05-15T08:07:56.239900Z

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!

1👍
tomrbowden 2021-05-14T13:22:04.236100Z

@benno.loeffler 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...

tomrbowden 2021-05-14T13:23:09.236300Z

(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"]])

tomrbowden 2021-05-14T13:23:28.236500Z

Benno Löffler 2021-05-14T13:50:16.237Z

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
&lt;link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma-rtl.min.css>"&gt;
    &lt;link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bulma-extensions@4.0.0/dist/css/bulma-extensions.min.css>"&gt;
I do not add any additional js-file.

tomrbowden 2021-05-14T14:37:00.237400Z

@benno.loeffler 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

1👀
Benno Löffler 2021-05-14T16:12:54.237800Z

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:

Benno Löffler 2021-05-14T16:40:10.238100Z

found a +sassc flag within the luminus template options - I'm quite sure, that will do what I need! Thanks a lot!