Hover text for hero layout

[seqizz]

Hi 👋

Just realized on the hero layout of homepage, sometimes icons might not be so clear, especially custom ones. Is there a way to add some hover tooltip text to those?

Example: Logos here like mastodon etc.

Thanks!

[seqizz]

So, as a late answer to myself, this is possible by overriding hero.html's <div class="mt-3 mb-10 text-2xl"> div like:

                    <div class="mt-3 mb-10 text-2xl">
                        {{ with .Site.Params.Author.links }}
                        <div class="flex flex-wrap">
                            {{ range . }}
                                {{ range $key, $value := . }}
                                    <a class="px-1 hover:text-primary-400 text-primary-300"
                                    href="{{ $value.url }}"
                                    target="_blank"
                                    title="{{ $value.title }}"
                                    aria-label="{{ $key | title }}"
                                    rel="me noopener noreferrer">{{- partial "icon.html" $key -}}</a>
                                {{ end }}
                            {{ end }}
                        </div>
                        {{ end }}
                    </div>

Then you can give your links like:

links = [
  { iconname = { url = "your_url", title = "hover text" } },
  { iconname2 = { url = "your_url2", title = "hover text 2" } },
...