Question

我是Jquery的新手，我需要开发一个小应用程序，在span鼠标上应该有一个小弹出窗口显示相关数据。就像使用jquery的工具提示一样。任何人都可以帮助我。提示：在BookMyshow网站上，如果你鼠标悬停在它上面的时间，它会在时间上显示票据可用性。在小窗口中

Answer 1

看到我的小提琴。我没有使用span标签，而是使用href。 http://jsfiddle.net/cfmlprabhu/pcq49jh9/

HTML：

 <a href="#" title="This will show up in the tooltip" class="masterTooltip">Your Text</a>
    <p title="Mouse over the heading above to view the tooltip." class="masterTooltip">Mouse over the    heading text above to view it's tooltip.</p>

CSS：

    .tooltip {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#161616;
    border-radius:5px;
    padding:10px;
    color:#fff;
    font-size:12px Arial;
   }

JS：

 $(document).ready(function() {
    // Tooltip only Text
    $('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
   }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
   }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
    });
   });

Answer 2

基本上可以这样做，只需将样式和位置改为你喜欢的样式：

HTML：

<span id="span">My Span</span>

的CSS：

#info{
    position:realtive;
    z-index:100;
    width:100px;
    height:100px;
    border:1px solid black;  
}

jQuery的：

$(document).ready(function(){
    $("#span").on("mouseenter",function(){
        if($("#info").length==0){
            $("body").append('<div id="info">info</div>');
        }
    }).on("mouseleave",function(){
        if($("#info").length){
            $("#info").remove();
        }        
    });
});

小提琴：http://jsfiddle.net/xhuy16jy/

鼠标悬停在Jquery上

2 个答案: