![]() |
|
||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|||||
|
|
#1 |
|
WLC Lover
Join Date: Mar 2012
Posts: 53
|
Hi,
I am using a tooltip of once existed Sohtanaka (feel really bad about his lost), I have messed up (I think) the co-ordinates. Can someone tell me how to make it work again as right now the image appears 100 feet away (not really 100 feet )Here is the HTML Code:
<li class="tip_trigger"><span class="tip"><img class="imagesizer" alt="300 Grams" src="https://lh5.googleusercontent.com/-qCRpwQt-W0A/Ty_3C0_uKMI/AAAAAAAAAAc/EFp-Ih7Mwo0/s90/300%2520.jpg" /></span><a href="#">Alex</a></li> Code:
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mou*** = e.pageX + -50; //Get X coodrinates
var mousey = e.pageY + -50; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mou*** + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 0 ) { //If tooltip exceeds the X coordinate of viewport
mou*** = e.pageX - tipWidth - 140;
} if ( tipVisY < 0 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 140;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mou*** });
});
});
</script>
Code:
.tip {
width:90px;
height:90px;
color: #000000;
background:#2B221B;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
The tooltip is only applied to the first one in 'A' category (tooltip only appears if your pointer is in A categories ALEX) |
|
|
|
| Thread Tools | |
| Display Modes | |
Threaded Mode |
|
|