All examples

Tooltips & toggletips > Toggletips
Image with alt badge

On some social media, the alt text can be shown in a dialog. Let's try it out!

Make these updates (changing only the HTML):

Example code

							<figure class="image">
	<img 
		src="../jonbatiste.jpg"
		alt="Jon Batiste holding a melodica 
		in one hand and in the other a sign that 
		says I feel good, I feel free, feel fine 
		just being me, I feel good today, oh so 
		good today"
		width="300"
	/>
	<button type="button">
		Alt
	</button>
	<dialog open id="d">
		<h1>Image description</h1>
		<p>Jon Batiste holding a melodica 
		in one hand and in the other a sign that 
		says I feel good, I feel free, feel fine 
		just being me, I feel good today, oh so 
		good today</p>
		<button type="button">
				Dismiss
		</button>
	</dialog>
</figure>

<style>
figure {
	position: relative;
}
figure > button {
	position: absolute;
	left: 1em;
	bottom: 1em;
	text-transform: uppercase;
}
figure > dialog {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 1em;
}
</style>

Preview

Answer

Open the answer

This is how you could achieve it:

Example code

							<figure class="image">
	<img 
	  src="../jonbatiste.jpg"
	  alt="Jon Batiste holding a melodica 
		in one hand and in the other a sign that 
		says I feel good, I feel free, feel fine 
		just being me, I feel good today, oh so 
		good today"
		width="300"
	/>
	<button 
	  type="button" 
		popovertarget="d"
	>
	  Alt
	</button>
	<dialog popover id="d">
		<h1>Image description</h1>
		<p>Jon Batiste holding a melodica 
		in one hand and in the other a sign that 
		says I feel good, I feel free, feel fine 
		just being me, I feel good today, oh so 
		good today</p>
		<button 
		  type="button" 
			popovertarget="d" 
			popovertargetaction="hide"
		>
			  Dismiss
		</button>
	</dialog>
</figure>

<style>
figure {
  position: relative;
}
figure > button {
  position: absolute;
	left: 1em;
	bottom: 1em;
	text-transform: uppercase;
}
figure > dialog {
  position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 1em;
}
</style>

Preview