Clojurians Log v2
garden 2019-01-15
@adamgefen has joined the channel
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?
well, that example is definitely a class. Meaning the answer to your question is somewhere in the html
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;
}
[:.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
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
good advice, thanks!
yes. a:
(defstylesheet screen
{:output-to "resources/public/css/screen.css"}
,,,
;;followed by all the css classes in garden syntax
)
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.