This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-01-15
Channels
- # announcements (5)
- # architecture (17)
- # aws (2)
- # bangalore-clj (1)
- # beginners (157)
- # boot (22)
- # boot-dev (2)
- # cider (64)
- # clara (2)
- # cljs-dev (3)
- # clojure (30)
- # clojure-art (2)
- # clojure-australia (1)
- # clojure-belgium (1)
- # clojure-denver (1)
- # clojure-dusseldorf (1)
- # clojure-europe (8)
- # clojure-finland (2)
- # clojure-italy (9)
- # clojure-nl (21)
- # clojure-spec (261)
- # clojure-switzerland (3)
- # clojure-uk (67)
- # clojurescript (57)
- # clojurewerkz (2)
- # cursive (3)
- # datomic (27)
- # emacs (12)
- # figwheel-main (2)
- # fulcro (48)
- # garden (67)
- # graphql (41)
- # jobs (8)
- # kaocha (8)
- # liberator (2)
- # lumo (1)
- # off-topic (19)
- # parinfer (9)
- # perun (4)
- # re-frame (50)
- # reagent (7)
- # remote-jobs (4)
- # ring-swagger (20)
- # rum (6)
- # shadow-cljs (170)
- # specter (3)
- # tools-deps (19)
- # vim (3)
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...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
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
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
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]
I see...
so for the basics, something like
.tooltip {
position: relative;
}
becomes
[:.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
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:
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
is that a .tooltip:&:after
in garden?
right, I'll try to reconstruct it.
looks like it actually works like this @adamgefen
[:div [:&:hover {:color "blue"}]]
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...
might be helful to just evaluate (garden.core/css ....)
with your code in the repl for a while, see what it produces
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]{
.....
}
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.