Sugarcube 2 - how to dismiss a tooltip on a touch device

rickrawson

Sugarcube 2.4; Twine 1.4.2

The following code pops up a tooltip on mouse hover or on a tap using a touch screen:

<a data-passage="" class="tooltip"><span style="text-align: left; font-family: arial;">This is the answer.</span>Show answer:</a>

This is the accompanying CSS:

a.tooltip {
     font-weight: normal;
} 
a.tooltip span {
    z-index:10;
	display:none; 
	padding:14px 20px;
    margin-top:50px; margin-left:-40px;
    min-width: 50px;
	max-width: 450px !important;
	line-height:20px;
}
a.tooltip:hover span{
    display:inline; 
	position:absolute;
    border:2px solid #FFF;  
	color: #000000;
	font-weight: normal;
	text-decoration: none;
	font-size:1.0em;
    background:#FFFFCC repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}

Hovering over "Show answer:" with a mouse pops up the tool tip. The tooltip disappears when the mouse moves away. However, on a touch device, a tap shows the popup, but there is no obvious way to dismiss it. I have played around with various potential solutions without success. If I toggle the ui-bar in or out, the tooltip disappears. Touching anywhere else on the UI bar does not work. It appears that touching outside the story element works, but most of my passages don't allow that because of the small iPad screen.

Any ideas?

rickrawson

Well, after more experimentation, I found a fix. I cannot tell if it's an elegant fix or a ridiculous one, but it works satisfactorily.

I adjusted the width of the HTML element (max-width=98%;) so that when the user taps on the very far right side of the screen, the tooltip is dismissed. This sacrifices a few pixels of screen width, but it's tolerable.

greyelf

Because tapping the far right to dismiss a tool-tip is not a standard behaviour I suggest that you include instructions at the start of your story about the need to do that tap, or else your Readers wont know to do it.