How to add a TITLE attribute to links?

A customer wants text to pop up when you hover over each link of the menu, how can I achieve this? She called it indexing.

How can I achieve this?

Hi, I’m a bit confused by the question…

“Alt tag” I suppose your talking about Alt attributes such as the ones we put on images, looking like:

<img alt="the description of the image" src="source of the image">

For each HTML elements, there is a set of allowed attributes. For links, the <a> elements, permitted attributes are href, target, download, rel, hreflang, title and type.

Alt is not allowed on the <a> element.

Now if you’re looking only to make a visual effect of text popping up on hover of an element, you can achieve this with Interactions.

But as you mention “indexing” which kind of refers to Search Engine Optimisation, there is no optimisation to make on links with Alts or adding a popup text. Some custom attributes such as rel can be useful tools for SEO but it’s another topic.

@vincent some websites when you hover over a link text will show and it’ll tell you a bit about it, she wants this one each menu link.

Gotcha.

That’s the title attribute.

Select your link, go to the settings tab and add a custom attribute named Title and with the value you need.

http://vincent.polenordstudio.fr/snap/dfr82.jpg

Now, when you hover the link, you’ll get the title.

http://vincent.polenordstudio.fr/snap/1kya3.jpg

4 Likes

@vincent ahh thank you so much! I knew it had to be something simple! :+1:

Well you’re in luck that Webflow developers did such an amazing job with custom attributes because usually visual designer don’t allow for it. :slight_smile:

1 Like

Hi Vincent, would I need to do the same thing for hreflang? I would need to do it on both sites right? For eg: en>fr on the first and fr>en on the other site?

Yes. And I think you have to declare the translated version as alternate too. Something like this:

<link rel="alternate" hreflang="es" href="url of translated page" />

But I never used it so try to double triple check this info :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.