Tooltip goes out of the screen on mobile devices

I have this, which isn’t the best code. Maybe someone can tidy it up a bit.

The main thing I need though is so the tooltip does’t go out of the screen on a mobile device.

I’ve tried a few obvious things but no luck.



a.tooltip {
	position:relative;
	text-decoration:none;
	cursor: pointer;
}

a.tooltip span {
	display: none;
	top: 5px; left:30px;
	width:600px;
    padding: 10px;
    padding-left: 15px;
    background:#ffffff; border:2px solid #cccccc; color:black;
    z-index: 1;
}

a.tooltip-left span {
	left:-635px;
}

a.tooltip-above span {
	top:-400px;
}


a.tooltip:hover span {
    display: inline;
    position: absolute;
}

<a class="tooltip"><img src="tooltip.png" align="top" alt="" /><span>
The tooltip text goes here
</span></a>


Does a hover tooltip even work on a mobile device? I didn’t think they supported :hover generally. Where have you tried this? Do you have a live link?

Yes, it works and hovers on most mobiles.

I’ve added some JavaScript to close the tooltip though, but the only thing I really need help on is the CSS and the positioning.

I don’t have a live link though.

Thanks for replying.

What is the exact issue with mobiles? You say it goes out of the screen but isn’t that a bit obvious when you have set the tooltip to 600px wide and mobiles are 320px or less wide? Or are you zoomed out and the tootltip is still misplaced somehow?

I think we’d need full html and css so that we can see a working demo as its not really clear what issues you are running into.

Thanks for replying.

How about trying it this way:

Forget mobiles, as this may be better. Everything is at http://page-test.co.uk/tooltip.html and when the browser is open a reasonable width, then everything is fine. Reduce the browser width and the tooltip goes out of view. I want it to wrap somehow so the tooltip can still be seen.

I have changed various settings but nothing seems to work. I suppose I just need a hand to tidy up the code.

Thanks.

Hi,

You’ve set the tooltip to 600px width which means it will poke out at smaller screens so you could add media queries to reduce the width of the tooltip based on the screen size. e.g if the screen width is smaller than the space needed then reduce the width of the tooltip span inside the media query (supported in IE9+).

Or you could try something simpler and create a fluid width tooltip.

Additional code to follow your original:


a.tooltip{
position:static;
}
a.tooltip  span{
min-width:100px;
max-width:600px;
width:50%;
margin-left:120px;
}

(Won’t work in ie6)

It’s not perfect but it scales down better than a fixed width.