Introduction

In this post I’ll show you how I created this Good work! (hover over it the blue word).

Setup

If you haven’t already create this directory path Website/layouts/shortcodes we now want to create two files one named tooltip.html and the other definition.html. Leave them blank for now.

Now locate your baseof.html file (if you are using a theme it can likely be found here: Website/themes/theme-name/layouts/_default1) and insert the following into the body

{{- if .HasShortcode "tooltip" -}}
<style>
	.definition {
		visibility: hidden;
		width: 350px;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 10px;
		position: absolute;
		z-index: 1;
		bottom: 125%;
		left: 50%;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 0.3s;
	}
	
	.term {
		position: relative;
		display: inline-block;
		border-bottom: 1px dotted black;
		border-left: 1px solid transparent;
		border-top: 1px solid transparent;
		color: DarkCyan;
		text-decoration: !important;
	}
	
	.term:hover .definition {
		visibility: visible;
		opacity: 1;
	}
</style>
{{ end }}

This code provides the CSS needed for the tooltip and prevents the server needing to replicate the CSS if you use more than one tooltip on a page 2.

Now go to definition.html and enter the following code3.

<span class="definition">
	{{ .Inner }}
</span>

Next go to tooltip.html and enter the following code4.

<!--CSS style for this is found in baseof.html-->
<span class="term">
	{{ .Inner }} 
</span>

Now when you want to use the shortcode you will need to use the following commands:

This is an example from my English course reader (linebreaks added for ease of viewing):

When we think of a {{< tooltip >}}lingua franca{{< definition >}} A lingua franca is a 
language that is adopted as a common language between speakers whose native languages are 
different. It is used extensively for communication by people who do not share a first 
language, particularly in multilingual settings. Historically, languages like Latin, 
French, and English have served as lingua francas in different regions and periods. 
Today, English is often considered a global lingua franca, especially in business and 
international relations. {{< /definition >}}{{< /tooltip >}} we probably think of Latin.

Which generates this:

This is an example from my English course reader:

When we think of a lingua franca A lingua franca is a language that is adopted as a common language between speakers whose native languages are different. It is used extensively for communication by people who do not share a first language, particularly in multilingual settings. Historically, languages like Latin, French, and English have served as lingua francas in different regions and periods. Today, English is often considered a global lingua franca, especially in business and international relations. we probably think of Latin.

  1. If you don’t have a baseof.html file insert the code chunk into the layout html file that that controls the page template you want to use tooltips on. ↩︎

  2. Modification taken from: https://discourse.gohugo.io/t/css-in-shortcodes-is-it-working-as-intended-in-0-55/19742/11 ↩︎

  3. Inspired by Starfall Projects code: https://www.starfallprojects.co.uk/blog/hugo-tooltip-shortcode/ ↩︎

  4. Code also inspired by Starfall Projects code: https://www.starfallprojects.co.uk/blog/hugo-tooltip-shortcode/ ↩︎