Title=”GIS” & and how to style them

Late last night, ie. 10:50pm, I was trying to finish up my week 1 project and came across an issue that I could not find the answer for in my notes.

I am trying to finish my project before the weekend, as I will be away most of it watching a baseball game in Detroit and celebrating my dad’s birthday.

Trying to read my notes and index page were not helping as I couldn’t remember what the attribute I was looking for was called.

I’m working on my portfolio page and have included a map pointer icon in my list of skills, as I have a certificate in GIS and love maps. But this icon does not fit in with all my dev icons and decided I wanted people to be able to hover over my icons and see what they mean.

But I couldn’t remember what it was called.

I had tried adding alt to my icon elements but nothing was showing when hovering over the icon. So I reached out to my group on Slack. My fellow students. Asking if anyone knew what I was talking about.

And within seconds I had the answer from two of them; title. I was looking for the title attribute.

Slack code from fellow students ftw!

The title attribute allows for a small box with copy to appear when you hover over an item, in this case the box would say Tell the user how this works. And it works on icon tags! Which is great! Because now someone can hover over my map point icon and see that it means GIS without me having to add titles under my icons (which I have done but they are hidden to viewers and only readable by screen readers!).

The default styling of the title tag is boring. Just look at it.

Default title style

But with some CSS you can make it look like this:

Which to me is pretty neat!

So how do you do this you might ask? Well! I googled it for you and found this post on Stakoverflow, but I’ll show you my code below.

The first step is adding a data-title tag to your elements, in my case I am using icon elements and gave them all values of their code names:

<article>
<i class="fa fa-map-marker" aria-hidden="true" data-title="GIS"> </i>
</article>

Then in CSS you need to give the element (i) some position:

i {
position: relative;
}

And add a :hover state with :after to the element and which ever styles you want, as well as in a content and position (absolute) properties. Here is what mine looks like:

i[data-title]:hover:after {
content: attr(data-title);
background: yellow;
color: tomato;
font-size: 25px;
padding: 5px;
font-family: $basicfont;
position: absolute;
top: -21px;
right: -30px;
border-radius: 5%;
}

And then I ended up with:

So cool! The font now matches my website font, it is a bit larger than the default font size, and I’ve positioned them to appear beside and above my icons. Yay!