Simple way to show tooltip on click rather than hover

Question

I am working a survey in Qualtrics. The following HTML code allows me to show the tooltip text "Text describing this concept" when the user hovers over the text "risk of negative societal effects from climate change and SG deployment (if any) in 2050 and in 2100."

<i>Please complete the following sentences related to how other factors impact the <span title="Text describing this concept"> <b>risk of negative societal effects from climate change and SG deployment (if any) in 2050 and in 2100.</b></span> </i>

Is there a simple way to change this so that the tooltip text only appears when they user clicks on the text? By simple, I mean without adding a bunch of css or other code.

Answer 1

There are a few ways to do this purely with CSS, which have different UX considerations.

Using :active with a parent-child relationship (ie when the b element is actively being mouse-downed upon.) This has accessibility issues for obvious reasons.

 span{ visibility: hidden; } b:active > span{ visibility: visible; }

 <i>Please complete the following sentences related to how other factors impact the <b>risk of negative societal effects from climate change and SG deployment (if any) in 2050 and in 2100. <span title="Text describing this concept">tooltip text</span></b> </i>

Using input:checked , which requires hiding an input of type checkbox and using a label to affect its state.

 span{ display: none; } input{ appearance: none; position: absolute; } input:checked ~ span{ display: block; }

 <i>Please complete the following sentences related to how other factors impact the <input type="checkbox" id="tooltip"><span title="Text describing this concept">tool tip</span> <label for="tooltip"><b>risk of negative societal effects from climate change and SG deployment (if any) in 2050 and in 2100.</b></label> </i>

You could then style the label when focused on the checkbox to help with tab navigation.