Clojurians Log v2

Looking for an example for tool-tips. I am using re-frame with garden and I can't manage to crack this... Basically I have an svg element something like :

[:svg [:g [:circle :r (some-value) :cx (some-other-value) ,,,]]]

what would it look like in normal CSS?

Just an example I just borrowed from https://github.com/jacekschae/learn-reagent-course-files/blob/master/increments/complete/public/css/style.css

/* = Tooltip = */

.tooltip {
  position: relative;
}

.tooltip::after {
  background: rgba(69, 77, 93, .9);
  border-radius: 6px;
  color: #fff;
  content: attr(data-tooltip);
  display: block;
  font-size: .8rem;
  max-width: 320px;
  opacity: 0;
  overflow: hidden;
  padding: .3rem .5rem;
  pointer-events: none;
  position: absolute;
  text-overflow: ellipsis;
  transform: translate(-50%, .4rem);
  transition: all .2s ease;
  white-space: pre;
  z-index: 300;
	bottom: 50%;
  left: auto;
  right: 100%;
  transform: translate(.4rem, 50%);
}

.tooltip:focus::after,
.tooltip:hover::after {
  opacity: 1;
  transform: translate(-.2rem, 50%);
}

.tooltip[disabled],
.tooltip.disabled {
  pointer-events: auto;
}

It can be simpler. I just want to understand the principle. Is it a class? and where is it defined as a tool-tip?

they're applying the .tooltip class to some element, probably just statically, with no js manipulation

because its set to opacity 0 when you're not hovering over it

so, in reframe, your hiccup would have something like

[:div 
   [:svg [:g [:circle :r (some-value) :cx (some-other-value) ,,,]]]
   [:div.toopltip "its an image"]
]

the element that uses that class in the example is:

[:div.btn.btn--primary.float--right.tooltip
                       {:data-tooltip "Add to order"
                        :on-click #(add-to-order id)}
                       [:i.icon.icon--plus]]

so how will the garden version look like?

for the .tooltip class I mean

gotcha. well, let me take a crack at translating that css to garden

the only thing im not sure about is the [disabled] selector

not sure how that works in garden

just the basics....

What is the disabled anyway?

its an attribute selector https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

so its saying it selects an html element that has a class .tooltip and an attribute [disabled]

or an element that has both the .tooltip and .disabled classes

I see...

so for the basics, something like

.tooltip {
  position: relative;
}

keep in mind, garden is literally just compiling to CSS, its not really doing anything more than the CSS is doing

What I don't understand is what attribute defines the element as an actual tooltip? since the class .tooltip is just a user defined var, no?

hahaha, I'm not sure if I completely understand the question, which is normal because CSS work is weird, but I'll give a few cracks at answering it to narrow down the space

so, the thing that identifies the element as being a tooltip is this in the hiccup: :div.btn.btn--primary.float--right .tooltip

ohhh

I see

I see

okay

yeah, theres a missing piece

okay, I get it now

alright, you ready for this?

I didn't even know you could do this

yes!

so. hes marking the item he wants a tooltip: the ':div.btn' with a .tooltip class. then, instead of making a second element in the html that is marked as a tooltip, he adds this guy:

:data-tooltip "Add to order"

any html attribute that starts with data-whatever is just arbitrary user defined data - has no meaning to the browser

so, what he's doing is creating an html element in the CSS that is the actual tooltip

thats what pseudoselectors do -- they create an element relative to some known element

right...

in this case, he's using the pseudoselector ::after, and then for the text of that element, hes referring to content: attr(data-tooltip);

which I didn't know you could do. I didn't know you could pass data into the css from the html

so, the .tooltip::after defined in the CSS is the tooltip

thats the CSS and the html element that contains it defined at once

is that a .tooltip:&:after in garden?

yeah, I believe so

right, I'll try to reconstruct it.

its been a while though, let me check the wiki

I use this page a lot

http://www.webp.ch/fourre-tout/target/#!/dgellow.fourre_tout.garden

looks like it actually works like this @adamgefen [:div [:&:hover {:color "blue"}]]

you put it in a child vector

the & refers to the value of the root of the parent vector

(s/div :.quote (s/after))

after elements are defined using functions

lol, sorry, Im just piecing this back together myself. its been a while since ive been in front end

ok. I need to get my head round this one. I've only defined defstylesheet in garden so far...

gotcha, so do you have it compiling to a stylesheet or anything yet?

might be helful to just evaluate (garden.core/css ....) with your code in the repl for a while, see what it produces

it outputs the text of the css

yes. a:

(defstylesheet screen
{:output-to "resources/public/css/screen.css"}
,,,
;;followed by all the css classes in garden syntax
)

good advice, thanks!

does anyone know how to convert this type of reference to garden from css

input[type=text]{
.....
}

can’t for the life of me figure it out

@chadhs [:input (garden.selectors/attr= :type :text) {...}]

@niamu thanks!

No problem. That’s a bit of a trickier one with garden. I personally refer to my own cljc-normalize (https://github.com/powernoodle/cljc-normalize) project which is as faithful a garden representation as I can make for normalize.css.