Fork me on GitHub
#garden
<
2019-01-15
>
manandearth19:01:29

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) ,,,]]]
and I'd like to have a stylised tool-tip with some logic on hover. can't get my head around it...

idiomancy20:01:18

what would it look like in normal CSS?

manandearth20:01:28

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;
}

manandearth20:01:58

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

idiomancy20:01:46

well, that example is definitely a class. Meaning the answer to your question is somewhere in the html

idiomancy20:01:46

well, that example is definitely a class. Meaning the answer to your question is somewhere in the html

idiomancy20:01:55

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

idiomancy20:01:15

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

idiomancy20:01:53

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

manandearth20:01:32

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]]

manandearth20:01:58

so how will the garden version look like?

manandearth20:01:36

for the .tooltip class I mean

idiomancy20:01:47

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

idiomancy20:01:14

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

idiomancy20:01:24

not sure how that works in garden

manandearth20:01:24

just the basics....

manandearth20:01:36

What is the disabled anyway?

idiomancy20:01:27

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

idiomancy20:01:01

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

idiomancy20:01:08

so for the basics, something like

.tooltip {
  position: relative;
}
becomes [:.tooltip {:position :relative}]

idiomancy20:01:54

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

manandearth20:01:43

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?

idiomancy20:01:19

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

idiomancy20:01:53

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

idiomancy20:01:52

yeah, theres a missing piece

idiomancy20:01:47

okay, I get it now

idiomancy20:01:53

alright, you ready for this?

idiomancy20:01:59

I didn't even know you could do this

idiomancy20:01:22

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:

idiomancy20:01:38

:data-tooltip "Add to order"

idiomancy20:01:16

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

idiomancy20:01:53

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

idiomancy20:01:20

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

idiomancy20:01:53

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

idiomancy20:01:11

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

idiomancy20:01:46

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

idiomancy20:01:01

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

manandearth20:01:53

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

idiomancy20:01:06

yeah, I believe so

manandearth20:01:21

right, I'll try to reconstruct it.

idiomancy20:01:27

its been a while though, let me check the wiki

idiomancy20:01:30

I use this page a lot

idiomancy20:01:01

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

idiomancy20:01:13

you put it in a child vector

idiomancy20:01:34

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

idiomancy20:01:01

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

idiomancy20:01:13

after elements are defined using functions

idiomancy21:01:20

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

manandearth21:01:44

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

idiomancy21:01:27

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

idiomancy21:01:27

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

idiomancy21:01:44

it outputs the text of the css

manandearth21:01:19

good advice, thanks!

manandearth21:01:20

yes. a:

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

chadhs22:01:25

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

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

chadhs22:01:30

can’t for the life of me figure it out

niamu22:01:10

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

niamu22:01:04

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.