large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2qF42iW">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div><img src="http://ift.tt/2pTDStE" alt="1*8RpaP4J1KI-RaxdIdMXHNg.gif"></div>
</div>
<p>I recently worked through a short tutorial about creating simple tooltips using pure CSS (and no additional HTML element or sJavaScript). I later used this technique in my own project, and figured out some tricks to improve upon it.</p>
<p>This article is a step-by-step tutorial that will help you understand these CSS tricks so you can make pure-CSS tooltips, too.</p>
<p>By the end of this post, you’ll know how to add a tooltip to any element by adding a simple attribute.</p>
<h3>The problem</h3>
<p>I needed to create a custom tooltip for my project.</p>
<p>I started off by Googling “CSS Tooltip Generator.” I found quite a few generators. Their approach was to add a span with an absolute position inside the element you want a tooltip for.</p>
<p>But I already had an otherwise-complete project. I didn’t want to go back through and add all these span elements throughout my project. This would take time and will complicate my HTML. There had to be a better way.</p>
<p>At last, I found an amazing tutorial on YouTube about tooltips. The smart trick it used was to create a tooltip using the <code>:: before</code> and <code>:: after</code> CSS selectors. You can watch the video <a href="https://www.youtube.com/watch?v=M4lQwiUvGlY&amp;t=157s">here</a>.</p>
<p>This trick is was smart and clean, but it wasn’t generic enough.</p>
<h3>Improving upon the solution</h3>
<p>In this part, I’ll make this trick more generic and we’ll discover more about some CSS properties. Here’s what we ultimately want to be able to do:</p>
<pre>&lt;button tooltip=”tooltip content here”&gt; click here !! &lt;/button&gt;</pre>
<p>Not only that, but we want to be able to specify the tooltip position easily:</p>
<pre>&lt;button tooltip=”tooltip content here” tooltip-position=”left” &gt; click here !! &lt;/button&gt;</pre>
<p>First — as mentioned in the video — we’ll add a <code>before</code> and an <code>after</code> pseudo element to the button.</p>
<p><code>::after</code> and <code>::before</code> are pseudo elements, which allow you to insert content onto a page from CSS before or after the content of the element. They work like this:</p>
<pre>div::after {<br> content: “after”;<br>}<br>div::before {<br> content: “befor”;<br>}</pre>
<p>The result looks something like this:</p>
<pre>&lt;div&gt;<br> before<br> &lt;! — dive content here →<br> after<br>&lt;/div&gt;</pre>
<h3>Let’s walk through this step-by-step</h3>
<p><strong>Step 1: </strong>we’ll add a tooltip attribute like this:</p>
<pre>&lt;button tooltip=”simple tooltip here”&gt; click Me !! &lt;/button&gt; </pre>
<p>We need <code>::after</code> and <code>::before</code> pseudo elements. These will be a simple rectangle with the content of the tooltip. We create a simple rectangle with CSS by adding a border around an empty element that we create with the <code>content</code> property.</p>
<p>The <code>::before</code> pseudo element is used to show the tooltip content. We add it with the property <code>content</code> and extract the tooltip attribute value. The value for content can be a string, an attribute value from the element like our example, or even an image with <code>url(path/image.png)</code>.</p>
<p>To make this work, the button element’s position must be relative. In other words, the position of all elements inside the button is relative to the position of the button element itself.</p>
<p>We add also some position tricks to make the tooltip in the center with the transform property and this the result.</p>
<p>Here’s our CSS:</p>
<p><strong>Step 2:</strong> we just play with the <code>::before</code> and <code>::after</code> pseudo elements to create a tooltip position. Our button HTML will look like this:</p>
<pre>&lt;button tooltip=”tooltip here” tooltip-position=”left”&gt; click here !! &lt;/button&gt;</pre>
<p>The tooltip-position can be: right, left, top, or bottom.</p>
<p><strong>step 3</strong>: in this final step, we will add a simple hover animation to the tooltip.</p>
<p>This CodePen shows the end result (and you can click through to see the final code):</p>
<p>Thanks for reading! If you think other people should read this, press the 💚 button, tweet and share the post. Remember to follow me on Medium so you can get notified about my future posts.</p>
<div><img src="http://ift.tt/2pSPaAB" alt="1*LPHtw2Z8OsGaAfjNWSrm9w.gif"></div>
<div><a href="http://ift.tt/2qF42iW">http://ift.tt/2qF42iW</a></div>


A step-by-step guide to making pure-CSS tooltips

A step-by-step guide to making pure-CSS tooltips

Top Stories