Caixa de aviso

Caixa de notificação parecida com a do google e facebook

by edgardleal

HTML

<div id="message" class=" positionated" style="display:none">
  
    <div class="border positionated arrow" style="z-index:0;">
  
    </div>    
  <div class="innerArrow positionated arrow">      
  </div>        
    <div id="innerBox" class="border white round container" style="z-index:15;height : 100px;">
        dd
    </div>
    
</div>
























<table border="1">
    <tr>
        <td>Teste</td>
        <td>5</td>
        <td>1.500,00</td>
        <td>XXZZ</td>        
    </tr>
    <tr>
        <td>Teste</td>
        <td>5</td>
        <td>1.500,00</td>
        <td>XXZZ</td>        
    </tr>
    <tr>
        <td>Teste</td>
        <td>5</td>
        <td>1.500,00</td>
        <td>XXZZ</td>        
    </tr>
    <tr>
        <td>Teste</td>
        <td>5</td>
        <td>1.500,00</td>
        <td>XXZZ</td>        
    </tr>
    <tr>
        <td>Teste</td>
        <td>5</td>
        <td>1.500,00</td>
        <td>XXZZ</td>        
    </tr>
    
</table>

CSS

#message{
    min-width : 80px;
    max-width : 200px;
    padding : 10px;
    height : 100px;
}

.white{
    background : white;
}
.border{
    border : solid 1px black;
}
.arrow{
    width : 10px;
    height : 10px;
    -webkit-transform : rotate(45deg);
    overflow : hidden;
}
.innerArrow{
    background : white;
    width : 12px;
    height : 12px;
    overflow : show;
    z-index : 5;
}

.positionated{
    position : absolute;
}
.container{
   padding : 5px;
}
.round{
  border-radius : 10px;
}
td{
  padding : 5px;
}

JavaScript

var oldElement;
function showHint(element, type, text){
    if(element==oldElement) return;
    if(type && type==="close"){
       $("#message").hide();
        return;
    }
   var message = $(".positionated");
    message.stop().show();
    if(text)
        $("#innerBox").text(text);
    $("#message").position({my : "left+1px center", 
                            at : "right center", of : $(element)});    
    $(".border.positionated.arrow").position({my : "left+3px center", 
                            at : "right center", of : $(element)});
    $(".innerArrow").position({my : "left+5px center", 
                            at : "right center", of : $(element)});

    message.fadeIn();
    oldElement = element;
}

$("td").mouseenter(function(){
   showHint(this,'show', this.innerText);
}).mouseleave(function(){
   showHint(null, 'close');
});