tooltipster-follower
Version:
A Tooltipster plugin to make the tooltip follow the cursor.
170 lines (148 loc) • 4.05 kB
HTML
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="jquery-ui/jquery-ui-draggable/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="//iamceege.github.io/tooltipster/dist/css/tooltipster.core.min.css" />
<link rel="stylesheet" type="text/css" href="../dist/css/tooltipster-follower.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui-draggable/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="//iamceege.github.io/tooltipster/dist/js/tooltipster.core.min.js"></script>
<script type="text/javascript" src="../dist/js/tooltipster-follower.js"></script>
<style>
body {
margin: 0;
min-height: 1500px;
}
.tooltip {
border: 1px solid red;
display: inline-block;
margin: 100px 100px;
max-width: 200px;
padding: 30px;
}
.unselectable {
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select: none;
-webkit-user-select:none;
user-select:none;
}
#fixed {
background: red;
height: 50px;
position: fixed;
right: 20px;
top: 200px;
width: 50px;
}
#static {
border: 1px solid red;
height: 200px;
margin: 100px 100px;
padding: 30px;
text-align: center;
width: 200px;
}
#staticclick {
border: 1px solid red;
height: 100px;
margin: 200px 50px;
padding: 30px;
text-align: center;
width: 100px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
anchor: 'top-left',
content: 'bottom-right',
multiple: true,
offset: [20, -20],
plugins: ['laa.follower'],
theme: 'tooltipster-punk'
});
$('.tooltip').tooltipster({
anchor: 'top-right',
content: 'bottom-left',
multiple: true,
offset: [-20, -20],
plugins: ['laa.follower'],
theme: 'tooltipster-noir'
});
$('.tooltip').tooltipster({
anchor: 'bottom-left',
content: 'top-right',
multiple: true,
offset: [20, 20],
plugins: ['laa.follower'],
theme: 'tooltipster-light'
});
$('.tooltip').tooltipster({
anchor: 'bottom-right',
content: 'top-left',
multiple: true,
offset: [-20, 20],
plugins: ['laa.follower'],
theme: 'tooltipster-borderless'
});
$('.tooltip').tooltipster({
anchor: 'right-center',
content: 'left',
multiple: true,
offset: [-20, 0],
plugins: ['laa.follower'],
theme: 'tooltipster-shadow'
});
$('.tooltip').tooltipster({
anchor: 'left-center',
content: 'right',
multiple: true,
offset: [20, 0],
plugins: ['laa.follower']
});
$('.tooltip').tooltipster({
anchor: 'top-center',
content: 'bottom',
multiple: true,
offset: [0, -60],
plugins: ['laa.follower']
});
$('.tooltip').tooltipster({
anchor: 'bottom-center',
content: 'top',
multiple: true,
offset: [0, 60],
plugins: ['laa.follower']
});
$('.tooltip').draggable({
grid: [10, 10],
scroll: false
});
$('#static').tooltipster({
content: 'Hello',
plugins: ['laa.follower']
});
$('#staticclick').tooltipster({
content: 'Hello',
plugins: ['laa.follower'],
trigger: 'click'
});
$('#fixed').tooltipster({
content: 'fixed',
plugins: ['laa.follower']
});
});
</script>
</head>
<body>
<span class="tooltip unselectable">Drag me around the edges to see me deal with overflow</span>
<div id="static" class="unselectable">Hover me</div>
<div id="staticclick" class="unselectable">Click/tap me</div>
<div id="fixed" class="unselectable"></div>
</body>
</html>