I made the navbar on the top of my page static (the rest of the page is dynamic)
The navbar is in a div that is given the ID "header" and and everything else is in a div with the ID "main".
I use this code to make tooltips.
This is the Javascript/jquery/qtip
$(document).ready(function() {
//Tooltips
$(".tiptrigger").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;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});
$(document).ready(function() {
//Tooltips
$(".tipheader").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 30; //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;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});
Then this is the CSS
.tip {
color: #fff;
background: #1d1d1d;
display: none; /*--Hides by default--*/
padding: 10px;
position: absolute;
z-index: 1000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
This is the HTML that calls the tooltip. The first line is for the main section, the second is for the header.
<a href="LINK URL" class="tiptrigger"><img src="IMAGE URL" alt="" /><span class="tip">CONTENT</span></a>
<a href="LINK URL" class="tipheader"><img src="IMAGE URL" alt="" /><span class="tip">CONTENT</span></a>
The reason I used two different javascript sections is because the tooltips in the header and the tooltips in the main section needed different parameters.
Now, the problem is that the tooltips work fine in the header, but they're not working in the main section and I can't think of any possible reason why, I tried everything I could think of and it's not working. Does anyone else know how to fix it?
I was finally able to fix it by setting the #header div to fixed positioning (so it stays at the top of the window without absolute positioning) and I made the #main div static positioned and moved it down with just page breaks.
*I decided it would be more efficient to only use one type of tooltip, so I removed one. *Note how I set the min-height so I can display how the #header div stays at the top when you scroll, that is the effect I wanted.
to see the finished result, go here: ultimatemmo.webege.com
The navbar on top is my header div and everything else is my main div.
Note: that site isn't a normal traffic site, I made it for a school project, now it's just a personal project that I'm constantly improving. The only reason it's on the internet is so my friends and girlfriend can see my progress on it.