Question

我正在使用fullcalendar。如果我将鼠标悬停在任何日期字段上，则会弹出一个div弹出窗口，就像工具提示一样。

这里我想添加一个这样的向下箭头，

如何在div中添加此向下箭头。我有一个例子。

＆＃13;

$(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');
	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>');
	//p.html( "left: " + offset.left + ", top: " + offset.top );
  $('#cal-info').removeClass('hide');
});

＆＃13;

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

＆＃13;

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

＆＃13;

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背景。您可以设置本地路径，而不是此网址。

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

2 个答案: