如何在mouseover div上添加向下箭頭

Question

我正在使用fullcalendar。如果我將鼠標懸停在任何日期字段上，一個div彈出窗口將打開它的工具提示。

這裏我想補充一個向下箭頭這樣，

我怎樣才能在DIV添加此向下箭頭。我有一個例子。

fiddle

$(document).ready(function() { 
 

 
    var date = new Date(); 
 
    var d = date.getDate(); 
 
    var m = date.getMonth(); 
 
    var y = date.getFullYear(); 
 

 
    var events_array = [ 
 
     { 
 
     title: 'Test1', 
 
     start: new Date(2012, 8, 20), 
 
     tip: 'Personal tip 1'}, 
 
    { 
 
     title: 'Test2', 
 
     start: new Date(2012, 8, 21), 
 
     tip: 'Personal tip 2'} 
 
    ]; 
 

 
    $('#calendar').fullCalendar({ 
 
     header: { 
 
      left: 'prev,next today', 
 
      center: 'title', 
 
      right: 'month,agendaWeek,agendaDay' 
 
     }, 
 
     selectable: true, 
 
     events: events_array, 
 
     eventRender: function(event, element) { 
 
      element.attr('title', event.tip); 
 
     } 
 
    }); 
 
}); 
 

 
$(document).on('hover', '.fc-day-number', function(){ 
 
    $('#cal-info').addClass('hide'); 
 
\t var data = $(this).html(); 
 
    var offset = $(this).offset(); 
 
    $('#cal-info').css('left', offset.left); 
 
    $('#cal-info').css('top', (offset.top - 40)); 
 
    $('#cal-info').html('information about: '+$(this).html()+'<br>Link to google: <a href="http://google.com" target="_blank">Google</a>'); 
 
\t //p.html("left: " + offset.left + ", top: " + offset.top); 
 
    $('#cal-info').removeClass('hide'); 
 
});

.tag{ 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:3px; 
 
    max-height:60px; 
 
    overflow:auto; 
 
    position: fixed; 
 
    z-index:999; 
 
}

<div style="border:solid 2px red;"> 
 
     <div id='calendar'></div> 
 
</div> 
 
<div class="tag hide" id="cal-info"> 
 

 
</div>

Answer 1

當你的容器是position: fixed，所以我改變overflow到visible 和僞元素添加到.tag元素使用border屬性來形成三角形。

jsfiddle.net/v98sb2a0/1/

關於形狀，你可以檢查出css-tricks post about making shape with CSS

Answer 2

更新CSS：

.tag{ 
    background-color:#000; 
    color:#fff; 
    padding:3px; 
    max-height:60px; 
    overflow:auto; 
    position: fixed; 
    z-index:999; 
    background-image: url("http://i.stack.imgur.com/P1bAW.png"); 
} 

這將設置圖片到你的DIV的背景。而不是這個URL，你可以設置你的本地路徑。