Skip to content

Instantly share code, notes, and snippets.

@aleszu

aleszu/gist:2af080eb7531295fbe1a

Created May 4, 2015 21:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aleszu/2af080eb7531295fbe1a to your computer and use it in GitHub Desktop.
Save aleszu/2af080eb7531295fbe1a to your computer and use it in GitHub Desktop.
Download ZIP
jQuery UI
Raw
gistfile1.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your title here</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( document ).tooltip({
items: "[data-tooltip]",
content: function() {
var element = $( this );
var text = element.text();
var url = element.attr('data-tooltip');
return "<img class='map' alt='" + text +
"' src='" + url + "'>";
}
});
});
</script>
</head>
<body>
<div>
<p>Say, I'm writing a story set in Mexico City and I want to show you a photo of its <span style="background-color: #ffff66;" data-tooltip="http://upload.wikimedia.org/wikipedia/commons/9/98/Mexico_City_Zocalo_Cathedral.jpg">main square</span> without moving away from my narrative layout.
</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment