Sha256: f4d6b71e74410bbfee374389119d9294a6e837c6f2b07972d04fe8751e8c372c
Contents?: true
Size: 1.41 KB
Versions: 7
Compression:
Stored size: 1.41 KB
Contents
<style>
#sixteen {
width: 33px;
height: 33px;
background-color: #000000;
z-index: -1;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
}
.attachToMe {
width: 100px;
height: 100px;
border: 1px solid #ff0000;
background-color: #ffdddd;
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
z-index: 1;
position: absolute;
bottom: 106px;
right: 106px;
}
.tip-wrap {
height: 130px;
width: 130px;
border: 1px solid #0000ff;
background-color: #ddddff;
font-family: sans-serif;
font-size: 12px;
}
</style>
<p>In the lower right corner you should see a semi-transparent red circle (or square). Moving your cursor around in there should make a tooltip appear at the corners of the black square following your pointer.</p>
<div id="sixteen"></div>
<div class="attachToMe"></div>
<script src="/depender/build?require=More/Tips"></script>
<script>
window.addEvent('load', function(){
$(document.body).setStyle('height', window.getHeight());
var attachTo = $$('.attachToMe').inject(document.body);
var tips = this.tips = new Tips(attachTo, {
offset: {x: 16, y: 16},
windowPadding: {x: 10, y: 10}
});
var sixteen = document.id('sixteen').inject(document.body);
$(document.body).addEvent('mousemove', function(event){
sixteen.setStyles({
top: event.page.y - 16,
left: event.page.x - 16
});
});
});
</script>
Version data entries
7 entries across 7 versions & 1 rubygems