$(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 mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //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() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
?
css
?
/*--Tooltip Styles--*/
.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}
?
?
javascript
?
jQuery.fn.selectCity = function(targetId) {
var _seft = this;
var targetId = $(targetId);
this.click(function(){
var A_top = $(this).offset().top + $(this).outerHeight(true); // 1
var A_left = $(this).offset().left;
targetId.bgiframe();
targetId.show().css({"position":"absolute","top":A_top+"px" ,"left":A_left+"px"});
});
targetId.find("#selectItemClose").click(function(){
targetId.hide();
});
targetId.find("#selectSub :checkbox").click(function(){
targetId.find(":checkbox").attr("checked",false);
$(this).attr("checked",true);
_seft.val( $(this).val() );
targetId.hide();
});
$(document).click(function(event){
if(event.target.id!=_seft.selector.substring(1)){
targetId.hide();
}
});
targetId.click(function(e){
e.stopPropagation(); // 2
});
return this;
}
$(function(){
//test1:
$("#address").selectCity("#selectItem");
//test2:
$("#address2").selectCity("#selectItem2");
});
</script>
?