index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mouse-over profile information</title>
<!-- optimize for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- force latest IE rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- muut styling -->
<link rel="stylesheet" href="https://cdn.muut.com/1/moot.css">
<!-- page specific CSS -->
<style>
body {
font-family: "myriad pro", tahoma, verdana, arial, sans-serif;
font-size: 18px; margin: 0; padding: 0;
}
.hgroup { text-align:center; color: #444; }
h3 { margin: -.8em 0 1.4em; font-weight: normal; color: #777; }
/* profile info looks */
#profile-info {
margin: 0;
left: 10em;
padding: 1em;
color: #444;
}
#profile-info:after {
left: 1em;
top: 99%;
}
</style>
</head>
<body>
<div class="hgroup">
<h2>Mouse-over profile information</h2>
<h3>Move your mouse over the avatars to see extra information</h3>
</div>
<!-- Muut client -->
<a class="muut" href="https://muut.com/i/goma">GoMA forums (demo)</a>
<!-- container for extra profile info -->
<div id="profile-info" class="m-help m-above"></div>
<!-- required scripts -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.muut.com/1/moot.min.js"></script>
<!-- extra info functionality -->
<script>
muut(function(app) {
var info = $('#profile-info')
app.root.click(function() {
info.hide()
})
function setPosition(el) {
var pos = el.offset()
info.css({
top: pos.top - info.outerHeight() - 10,
left: pos.left - 5
})
}
$('.muut').on('mouseenter mouseleave', '.m-facelink', function(e) {
if (e.toElement == info[0]) return
var el = $(e.target),
username = el.closest('.m-facelink').attr('href').slice(4)
// loading
info.toggle(e.type == 'mouseenter').html('loading…')
setPosition(el)
// load info with AJAX
$.get('profile-info.html', { username: username }, function(html) {
info.html(html)
setPosition(el)
})
})
})
</script>
</body>
</html>
profile-info.html
<strong>John Doe Junior</strong>
<p>
This info area is the same for every user since the loaded file is static HTML. Your application, however, should respond with dynamic data based on the username parameter on the query string.
</p>