jquery-easy-label
Version:
Creating informative/help text with cookie cache supported.
43 lines (40 loc) • 1.86 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>jQuery - Easy label</title>
<link rel="stylesheet" href="../src/easy.stickypost.css" media="screen" title="Easy Sticky Post CSS" charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js" charset="utf-8"></script>
<script src="../src/easy.stickypost.js" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#tips1").stickypost({'tooltip': 'alamak','pin': '<span>x</span>'});
$("#tips2").stickypost({
'cached':false,
'tooltip': 'Click here to close it temporarily',
'pin': '<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/delete.png" height="16" width="16"/>',
'color': 'orange'
});
});
</script>
</head>
<body>
<div id="tips1">
<h2>Tips:</h2>
<p>Default color with custom delete Pin 'x'</p>
<p data-stickyid="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum nibh ut rhoncus congue. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p data-stickyid="2">Nulla nec egestas enim. Donec porttitor, quam cursus faucibus facilisis, magna ex condimentum ipsum, a sagittis nulla libero ac velit. Nunc scelerisque arcu eleifend, pellentesque lectus et, porta urna.
</p>
<p data-stickyid="3">Aliquam fringilla, dolor ut gravida porttitor, urna risus auctor libero, eget dapibus ante sem et ante. Proin erat orci, pulvinar ac tincidunt a, blandit a risus.
</p>
</div>
<div id="tips2">
<h2>Tips 2:</h2>
<p>Orange color (hover) with custom delete image Pin</p>
<p data-stickyid="1">ABC</p>
<p data-stickyid="2">def</p>
<p data-stickyid="3">GHI</p>
</div>
</body>
</html>