How can I access CSS selectors programmatically?

Question

I'm working from an example I found on the web to create supposed HTML5 tooltips in CSS3.

.tooltip {
    border-bottom: 1px dotted #333;
    position: relative; cursor: pointer;
}  

.tooltip:hover:after {
    content: attr(title);
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
}

How can I create this programmatically as the application purposely contains no HTML or CSS?

From what I can tell so far, I think the 'after' is a CSS selector but I cannot find out any more information as to how I can create, access or modify this in the DOM using JavaScript.

JavaScript solutions only please, thank you.

I.... don't understand your question. You want to add CSS rules to the DOM using JavaScript? — Madara's Ghost, Jun 27 '12 at 09:31
possible duplicate: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript — micadelli, Jun 27 '12 at 09:32
@Rob W: I've seen a few questions closed today for being I dunno, interpreted as lazy I suppose (another was very annoying because I understood exactly what was being asked and had entered my answer, but the question got deleted), but there certainly is a question here as I see it. There definitely could be more information to go off, but it's not as if there is nothing at all. I saw this as the equivalent of writing a shim. The asker doesn't always necessarily know the right terminology to explain the problem properly, if they did, they'd probably have found their answer already. — Lee Kowalkowski, Jun 27 '12 at 20:30
@Rob W: I suspect tomwrong only wanted to close the question because of the negative attention it received. I've seen an unnecessary level of impatience on here recently, with people down-voting answers, just because they disagree with it. I pinged you because according to the statement below, you're the first person mentioned, yet you also answered it, so I saw that as a contradiction. I don't know anything about the mechanism around closures, with not having enough rep to do that. I only mentioned shims because that was the context I saw a plausible question (rather than berating the asker). — Lee Kowalkowski, Jun 28 '12 at 08:46
@Rob W: It's not meta, it's about *this* question (minor rant aside). The possible duplicate, is merely a *possible* duplicate. Looking at them, they are different questions. The duplicate would like to manipulate a stylesheet, this questions would like to achieve an effect ('HTML5' tooltip) without using a stylesheet. It's just a pity to see such arrogance or impatience in a Q&A context. Be helpful. (The supporting comment is the "telling me off" one from tomwrong.). Meta is for discussing Stack Overflow, this question should be discussed here. — Lee Kowalkowski, Jun 28 '12 at 10:54
@LeeKowalkowski The fact that the result looks worse (no CSS = no styling, or using images (ugh)) and is less performant is my reason for "telling him off". I have provided an example at the bottom of the comment chain under my answer, whose focus laid on showing a *similar* effect. It did not incorporate positioning: It can be achieved using the values of `event.clientX` and `event.clientY` **plus the *CSS* properties `position`, `top`, `left`**. But the OP refused any CSS, so this is not possible. Furthermore, `:hover` cannot be simulated exactely using mouse* events. (tbc) — Rob W, Jun 28 '12 at 11:12
@LeeKowalkowski To not get a flash when hovering over the tooltip, he has to use `setTimeout` and `clearTimeout`. To get closer to `:after`, one has to wrap the element in an inline container, and insert the tooltip element after it. That's very expensive. Drawing the line further, when other CSS effects are also simulated using JS, the page would become terribly slow and the chance on cross-browser compatibility shrinks. Not to mention the code's size. TL;DR: Suggesting a worse method over a present good method is not helpful. — Rob W, Jun 28 '12 at 11:18
I think you've taken the 'no CSS or HTML' request pedantically, try to understand it from a novice's perspective. He just doesn't want to use a *StyleSheet* (for some reason). Style however, is fine (must be, because he wants to use just the DOM, and that's not pure JS either. There's nothing wrong with highlighting best practice, as long as it's done nicely. There are cases where a StyleSheet is not necessarily the easiest way to achieve something, (e.g. when every element is styled differently, so selectors are overkill). He could be experimenting with something entirely non-traditional. — Lee Kowalkowski, Jun 28 '12 at 11:49
I reject that fact this was closed. The moderator is wrong. Just because he cannot see the value does not mean there is no value. Very close minded. — thomas-peter, Jul 24 '12 at 14:19

score 3 · Accepted Answer · edited Jun 27 '12 at 15:40

3

You can add any CSS rule in the document using insertRule. On MDNs page, there's a method which shows a cross-browser compatible method to insert arbitrary CSS rules.

Since your app does not contain any HTML, you have to create a <style> object yourself using document.createElement. document.styleSheets[0].cssRules will be null when the style sheet is from a different origin.

edited Jun 27 '12 at 15:40

Jonathan Hall

75,165
16
143
189

answered Jun 27 '12 at 09:30

Rob W

341,306
83
791
678

Thank you, but it contains inline CSS. I'm trying to create a demonstration application that uses no CSS or HTML. – thomas-peter Jun 27 '12 at 09:35
2

@tomwrong Why do you want to mimic/use CSS using JavaScript without using CSS? – Rob W Jun 27 '12 at 09:41
I don't really like CSS or HTML. That makes me very unpopular, I haven't worked for almost a year :-) – thomas-peter Jun 27 '12 at 09:47
3

@tomwrong What do you mean by "without CSS / HTML"? `document.createElement` creates a HTML element. It seems that you are reluctant to use this answer, because CSS is clearly visible in it. You can waste time on achieving the same effect using pure JS without any CSS (`.style.*` is also CSS). PS. Without HTML (and CSS to some extend), JavaScript is useless for creating web applications. I strongly recommend to drop the aversion against other technologies, and start using it. When you've got a good reason to use it, you'll pick it up much faster. – Rob W Jun 27 '12 at 10:01
I suppose there could be situations where avoiding CSS/HTML may be more productive (for example, porting existing code from another platform without having to completely re-architect it). But generally, what you lack in skill, you'll be needing to compensate with effort. – Lee Kowalkowski Jun 27 '12 at 10:58
2

@tomwrong Don't add "EDIT: DELETE" etc to your question. Remember, a Q&A might not be useful to you, but it *can* be useful to others. If you think that it deserves a deletion, flag it for moderator attention. RE: Comment downvoting: Voting is one way to express (dis)agreement with (the quality) of a post. *Another* way is to add a comment in which you explain why you disagree with a post/comment, and how it can be improved. – Rob W Jun 27 '12 at 11:04
This is too much This is the most insulted I have ever been online. Actually annoyed right now. – thomas-peter Jun 27 '12 at 15:07
17

@tomwrong: I'm not sure why you would take offense to Rob W's comments, but if you're annoyed you may want to take some more time off and come back when you're better (it's been what, 4 hours?). If you want to clarify your question, *clarify your question*, not leave a self-pitying edit message. I'll unlock it when you're ready. – BoltClock Jun 27 '12 at 15:10
6

@tomwrong You don't like the underlying technologies of the web and you're still trying to be a web developer? Life's too short for that...find another way to make a living. – dmckee --- ex-moderator kitten Jun 27 '12 at 15:46
Is there anyone who has the knowledge to solve this problem? So far Lee Kowalkowski is the only person who is making any sort of sense to me right now and not "telling me off" – thomas-peter Jun 27 '12 at 16:26
3

@tomwrong http://jsfiddle.net/YPyHg/ (HTML+CSS) versus http://jsfiddle.net/JbXeq/ (pure JS ([v2](http://jsfiddle.net/JbXeq/1/))). The first looks good, the latter can't be improved without CSS. You would have to use an image for rounded corners + opacity (yuck). I did not write the full code, because you don't show any efforts in trying to solve the question yourself. But it's a basic idea which you can extend. Just a warning: This method is more expensive (in terms of performance) than the first method. – Rob W Jun 27 '12 at 16:47

score 1 · Answer 2 · answered Jun 27 '12 at 10:54

As :hover is event-bound, you need to hook all the related events (e.g. onmouseover, onmouseout) to all the relevant elements (where /\btooltip\b/.test(className)) if you want to do it in JS.

You could just bind the events to a common parent (e.g. document.body, then inspect the event object to qualify the element that triggered the event instead of attaching an event to an unknown number of elements).

As for :after, that is a pseudo element that is inserted after the selected element, and because of :hover it will only be in the document when hovering. So you just use DOM methods to add/remove the element (you don't need to create it every time, you can create it once and just keep a reference to it).

Instead of adding/removing the element, you may be able to just add it once, and toggle it's visibility (e.g. element.style.display = visible ? '' : 'none';).

What you do is up to you.

There just happen to be events that take place when an element transitions between `:not(:hover)` and `:hover`. The pseudo-class itself is not event-bound *per se*. — BoltClock, Jun 27 '12 at 20:58
@BoltClock: *User* event, not DOM event. I'm talking high-level, you're talking low. — Lee Kowalkowski, Jun 28 '12 at 08:37

How can I access CSS selectors programmatically?

2 Answers2