Skip to content

Instantly share code, notes, and snippets.

@techtonik

techtonik/tooltip.html

Created December 26, 2015 10:26
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 techtonik/d483501629a8eaf84ba9 to your computer and use it in GitHub Desktop.
Save techtonik/d483501629a8eaf84ba9 to your computer and use it in GitHub Desktop.
Download ZIP
HTML tooltip on hover
Raw
tooltip.html
<!DOCTYPE html>
<style>
#suggestButton { display: none; }
table.badge > tbody > tr > td > img,
table.badge > tbody > tr > th { cursor: pointer; }
#markup-tooltip {
display:none;
position:fixed;
overflow:hidden;
background-color: #fff;
border: #aaa solid 1px;
padding: 2px;
}
</style>
<span id='markup-tooltip'>View markup code</span>
<table class='badge'><tbody>
<tr><th> Travis: </th>
<td><img src='https://img.shields.io/travis/rust-lang/rust.svg' alt=''/></td>
<td><code>https://img.shields.io/travis/USER/REPO.svg</code></td>
</tr>
<tr><th> Wercker: </th>
<td><img src='https://img.shields.io/wercker/ci/wercker/docs.svg' alt=''/></td>
<td><code>https://img.shields.io/wercker/ci/wercker/docs.svg</code></td>
</tr>
<tr><th> AppVeyor: </th>
<td><img src='https://img.shields.io/appveyor/ci/gruntjs/grunt.svg' alt=''/></td>
<td><code>https://img.shields.io/appveyor/ci/gruntjs/grunt.svg</code></td>
</tr>
<tr><th> AppVeyor branch: </th>
<td><img src='https://img.shields.io/appveyor/ci/gruntjs/grunt/master.svg' alt=''/></td>
<td><code>https://img.shields.io/appveyor/ci/gruntjs/grunt/master.svg</code></td>
</tr>
</tbody></table>
<script>
var markupTooltip = document.getElementById('markup-tooltip');
function updateTooltipPos(e) {
console.log("window mousemove listener invoked");
var x = e.clientX,
y = e.clientY;
markupTooltip.style.top = (y + 20) + 'px';
markupTooltip.style.left = (x + 20) + 'px';
markupTooltip.style.display = 'block';
};
function markupDialogInit() {
console.log('init called');
var trs = document.querySelectorAll('table.badge tr');
for (var i = 0; i < trs.length; i++) {
var tr = trs[i];
tr.querySelector('th').addEventListener('mousemove', updateTooltipPos);
tr.querySelector('th').addEventListener('mouseout', function(e) {
markupTooltip.style.display = '';
});
}
}
document.addEventListener('DOMContentLoaded', markupDialogInit);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment