Esta pergunta é mais para o DJPRMF, pois a dúvida que tenho é sobre algo que está aqui no fórum:

No lado direito do logotipo do fórum, "Tuga Tech" , estão uns icones(Adicionar aos favoritos, pagina inicial,blog,RSS,etc...)

Quando se passa o cursor em qualquer um dos icones aparece um detalhe da image, num rectângulo cinzento, será que me podem dar uma ajudinha, de como fazer algo assim em websites?

Boas,
para esse efeito utilizei códigos jquery de tooltips.

Veja alguns aqui:
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Alguma duvida basta dizer escrever
Cumps

Também é necessário jQuery?

MoisesPT escreveu:Também é necessário jQuery?

Sim deve adicionar o script jquery.. .

Quer voltar a ajudar-me, mas desta vez na configuração de tooltips?

MoisesPT escreveu:Quer voltar a ajudar-me, mas desta vez na configuração de tooltips?

Claro..
No que necessita de ajuda mais especificamente?

Cumps

Queria que me ajudasse, nunca consigo emplementar bem os códigos jQuery..Esta é a tool tip

http://www.queness.com/post/92/create-a-simple-cssjavascript-tooltip-with-jquery

Vamos por partes então:
Adicionou o javascript e o css na head do seu documento HTML?

Código:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
 
    //Select all anchor tag with rel set to tooltip
    $('a[rel=tooltip]').mouseover(function(e) {
       
        //Grab the title attribute's value and assign it to a variable
        var tip = $(this).attr('title');   
       
        //Remove the title attribute's to avoid the native tooltip from the browser
        $(this).attr('title','');
       
        //Append the tooltip template and its value
        $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');   
       
        //Set the X and Y axis of the tooltip
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
       
        //Show the tooltip with faceIn effect
        $('#tooltip').fadeIn('500');
        $('#tooltip').fadeTo('10',0.8);
       
    }).mousemove(function(e) {
   
        //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
       
    }).mouseout(function() {
   
        //Put back the title attribute's value
        $(this).attr('title',$('.tipBody').html());
   
        //Remove the appended tooltip template
        $(this).children('div#tooltip').remove();
       
    });
 
});
 
</script>
 
<style>
body {font-family:arial;font-size:12px;text-align:center;}
div#paragraph {width:300px;margin:0 auto;text-align:left}
a {color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}
a:hover {color:#000;text-decoration:none;}
 
/* Tooltip */
 
#tooltip {
    position:absolute;
    z-index:9999;
    color:#fff;
    font-size:10px;
    width:180px;
   
}
 
#tooltip .tipHeader {
    height:8px;
    background:url(images/tipHeader.gif) no-repeat;
}
 
/* IE hack */
*html #tooltip .tipHeader {margin-bottom:-6px;}
 
#tooltip .tipBody {
    background-color:#000;
    padding:5px;
}
 
#tooltip .tipFooter {
    height:8px;
    background:url(images/tipFooter.gif) no-repeat;
}
 
</style>

Cumps

Nao ainda nao inseri os codigo da css e da actionscript, estou no telemovel...Sera que pode fazer o tutorial? e assim quando chegar a casa faco-o..

Nem é necessário um tutorial muito complicado...
A própria explicação está no site do script... Veja na secção "Final Product". Basta depois editar conforme o seu site..

lembre-se que deve fazer o download do script e fazer o uplaod do mesmo para o seu servidor.. .

Cumps

Obrigado