Fork me on GitHub
#reagent
<
2021-05-14
>
Benno Löffler07:05:03

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

tomrbowden12:05:29

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

tomrbowden13:05:04

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

tomrbowden13:05:09

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

Benno Löffler13:05:16

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.

tomrbowden14:05:00

@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

👀 3
Benno Löffler16:05:54

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öffler16:05:10

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

Benno Löffler08:05:56

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!

👍 2