Red Dot It on Twitter

twitterdot animation showing an alternate presentation using a dot instead of a heart icon

Given the level of despair and rage resulting from Twitter’s move to the like/heart option, I have decided to save the world. It seemed a worthwhile way to spend two minutes.

This codepen was handy in figuring out how to make the arrow part of the tooltip the right color.

The following chunk of CSS thrown into a plugin like Stylebot will now enable you to simply red1 dot something. It is simply a circle which could mean anything. Instead of the tooltip displaying the word “Like” you now have a blank canvas upon which you can think any word you want.2

div.HeartAnimation:hover {
    background-color: #e12b36;
    background-image: url();
}

div.HeartAnimation {
    background-color: #aab8c2;
    height: 20px;
    width: 20px;
    margin-top: 15px;
    border-radius: 15px;
    background-image: url();
}

.tooltip-inner {
    background-color: white;
    box-shadow: 4px 4px 2px #efefef;
}

.tooltip.top .tooltip-arrow {
    border-top-color: white;
}

[EDIT]

Another option that’s probably simpler and more fun, although unlike Gizmodo, I didn’t copy him.


1 Change the color if red is offensive.

2 In reality replacing the text via javascript seemed a bit too much effort for this sort of nonsense. I can justify two minutes but not ten.