Create CSS only tooltips on hover.
⭐️Files you need ⭐️
💻Useful Tooltips Code: https://www.dropbox.com/sh/fwxt6wey4pcwwaw/AACtWH2mjtjM46POCX4B1lxaa?dl=0
💻All tutorials in this series need this “_theme-styles” directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ-jb-H5pWuIUx7t_GvQqa?dl=0
This video works as a stand-alone tutorial but is also day 13 of CSS3 in 30 Days. For the rest of the series, check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU
CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials: https://codecollege.ca/
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://medium.freecodecamp.org
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
source
I don't really do a lot of CSS styling but you make it very interesting to watch. One though I had is why you don't split your screen so we can see more directly what each style is doing? If the files are small enough, the CodePen editor even does hot reloading without any page refreshes. Nonetheless great series so far
nice series i really like the way you explain 😀
why didn't you use the data-tooltip attribute for example…
css transform is good for performance too: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Author, take my best wishes. For you there is a special place in the heaven.(with black Jack and wh(10*0)res)
Se que no vas a entender nada, pero gracias por el tutorial si me ayudaste. C:
Really useful, thank you!
If you don't want the standard title to also appear with your custom tooltip, you can move your tooltip text into a data attribute instead of using the title eg.
title="Tooltip text!" -> data-tooltip="Tooltip text!" in your HTML and
content: attr(title); -> content: attr(data-tooltip); in your CSS
Thanks man
You've helped demystify the black magic that is tooltips!
Very good tutorial and it renders in all browsers too, including IE. I have seen some complex one that doesn't render across all browsers. All tooltips should be written like this.
star-lord explaining CSS
I positioned right and bottom tooltips by myself but couldn't position properly the left tooltip.
Business Opportunity in Ruvol
I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”
It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”
The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.
HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?
I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0
BIG MONEY POTENTIAL IN RUVOL!
It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.
You may contact me at: rodolfovitangcol@gmail.com.
Thanks and God bless!
RODOLFO MARTIN VITANGCOL
The Ruvol Inventor
28:01 Completed the right, bottom and left by myself
Awesome. Thanks for brief explanation 👌👌👌
Make it simple, too diffucult to understand