10 CSS Tricks You Need to Know About (Part 2)

Continuing our series on CSS tricks where you should probably read about the first one, I have collected more tricks that have the potential to blow your mind and ask why you never knew about them before.

CSS Tricks Part I

1 — Check for user color theme preference

If you ever need to detect whether the user prefers dark or light mode to style your site accordingly, CSS gives you this ability through the media query API.

@media (prefers-color-scheme: dark) {
   // your code for dark mode here
}

watch video

2 — Text tooltips

CSS tooltips are easy and if planned and use right, can do a whole lot for you. The limitation is that they can only show text but I went over so many details in a video dedicated to this where I demonstrate how to add positioning, theme, and more. But this relies on pseudo-elements and the ability of their content being something you set in an attribute of their parent. Then all you do is the absolutely position it and style it.

<button type="button" class="tooltip" data-tip="This css tooltip">
   I have a Tooltip
</button>

// only add tooltip when there is a message
.tooltip[data-tip]:not([data-tip=""])::before {
  content: attr(data-tip);
  position: absolute;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  padding: 15px 10px;
  border-radius: 3px;
  max-width: 300px;
  width: 250%;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: calc(100% + 12px);
}

watch video

3 — The direction arrow

One thing that actually goes great with a tooltip is the little down arrow pointing to the button with the tooltip (image above). The conversation bubble arrow. It works by removing the width and height of the pseudo-element and adds borders only which with a width and height of zero forms 4 triangles which you can set the color to be transparent and then target a specific one to color, whether the top, right, bottom or left.