un tooltip es lo que deseas tu!, esto te puede servir:
debes usar javascript, te lo colocare, pero en el archivo debes tener un div como este:
Código PHP:
<div id="posicion" class="hint"></div><!-- Tooltip-->
el javascript es este:
Código PHP:
function Browser() {
this.isIE = false; // Internet Explorer
this.isNS = false; // Netscape
this.isOpera = false; // Opera
if (navigator.userAgent.indexOf("Netscape6/") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("Gecko") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("MSIE") >=0 && navigator.userAgent.indexOf("Opera") <0) {
this.isIE = true;
return;
}
if (navigator.userAgent.indexOf("Opera") >=0) {
this.isOpera = true;
return;
}
}
var browser = new Browser();
function initMovimiento(event, msg){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onmousemove", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", getposicion, true);
event.preventDefault();
}
}
function initPulsar(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onclick", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("click", getposicion, true);
event.preventDefault();
}
}
function getposicion(event){
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
if (browser.isOpera) {
x = window.event.clientX + document.documentElement.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop;
}
document.getElementById("posicion").style.visibility = "visible";
document.getElementById("posicion").style.left= (x - 55) +"px";
document.getElementById("posicion").style.top = y + 20 +"px";
document.getElementById("posicion").innerHTML = "Arrastre para ordenar sus "+msg;
}
function cancelar() {
if (browser.isIE || browser.isOpera) {
document.detachEvent("onmousemove", getposicion);
document.detachEvent("onclick", getposicion);
}
if (browser.isNS ) {
document.removeEventListener("mousemove", getposicion, true);
document.removeEventListener("click", getposicion, true);
}
document.getElementById("posicion").style.visibility= "hidden";
}
//para cambiar el color de fondod de la tabla
function mOvr(obj, color)
{
obj.style.background=color;
}
en este caso se esta aplicando en una tabla pero tu lo puedes adaptar:
Código PHP:
<script language="javascript">msg="productos";</script>
<script type="text/javascript" src="../js/tooltip.js"></script>
....................................
<table class="cont_tabla" onMouseOver="mOvr(this,'#EBEDEF'); initMovimiento(event);" onMouseOut="mOvr(this,'#FFFFFF'); cancelar();">
Lo que te ayudara a crear el efecto de tootltip tambn es el css.
Saludos