Question

我有一个纯CSS驱动的工具提示，但无法动态定位。如果下方有很少或没有空间，我希望工具提示显示在顶部，反之亦然。知道怎么做吗？我知道我将需要Javascript或jQuery来实现，但我对脚本没有太多的了解。

这是CSS代码：

    a.tooltipdrop {
    outline:none; 
    font-family:Arial;
    }
    a.tooltipdrop strong {
    line-height:30px;
    }
    a.tooltipdrop:hover {
    text-decoration:none;
    } 
    a.tooltipdrop span {
    z-index:10;
    display:none; 
    padding:14px 10px;
    margin-top:-30px; 
    margin-left:18px;
    width:450px;
    line-height:18px;
    }
    a.tooltipdrop:hover span{
    display:inline;
    position:absolute;
    color:#111;
    border:3px solid #E51427; 
    background:#fffAF0;
    font-family:arial;
    font-size: 14px;
    }
    .callout {
    z-index:20;
    position:absolute;
    top:30px;
    border:0;
    left:-12px;
    }
    /*CSS3 extras*/
    a.tooltipdrop span
    {
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    }

    table{
    border-collapse:collapse;
    }
    table, td, th{
    border:0;
    font-family:Arial;
    font-style:normal;
    font-size:12px;
    }
    td{
    padding: 0 5px 8px;
    }
    .tdHeader{
    font-weight: bold;
    }

HTML代码：

    <a href="#" class="tooltipdrop">See schedule
    <span>
    <img class="callout" src="tooltipdrop.gif" />
    <strong>Cancellation Policy</strong><br />
    The last day to drop without penalty is 08/13/2013. The following         charges will be applied after this date: <br/><br/>
    <table>
    <tr>
    <td class="tdHeader">Cancellation Dates</td>
    <td class="tdHeader">Late Charge</td>
    <td class="tdHeader">Charge amount if paid in full:</td>
    </tr>   
    <tr>
    <td>10/05/2013 - 10/11/2013</td>
    <td>10.0% </td>
    <td>$50.00</td>
    </tr>
    <tr>
    <td>10/12/2013 - 10/16/2013 </td>
    <td>25.0%</td>
    <td>$125.00</td>
    </tr>
    <tr>
    <td>10/17/2013 - 10/18/2013</td>
    <td>50.0%</td>
    <td>$250.00</td>
    </tr>
    <tr>
    <td>10/19/2013 - 10/19/2013</td>
    <td>100.0%</td>
    <td>$500.00</td>
    </tr>
    </table>
    </span>
    </a>

Answer 1

这是一项正在进行的解决方案：http://jsfiddle.net/VDV4R/1/

不幸的是，您无法使用:before和:after伪选择器，因为您无法在jQuery中访问它们（因为它们实际上不存在于DOM中）。

[说明性] HTML

<div alt="tooltip one">one</div>
<div alt="tooltip two; which is longer">two</div>
<div class="big">No tooltip here</div>
<div alt="wahey">And one more time...</div>

JQuery的

var itemsToTooltip = $('[alt]');

if (itemsToTooltip.length > 0) {
// Create our tooltip element
    var tooltip = $('<div/>', {
        id: 'tooltip'
    }).appendTo('body');
}

itemsToTooltip.mousemove(function (e) {
    // Set tooltip content
    tooltip.text($(this).attr('alt'));

    // Get full size (inc padding + margin) of tooltip
    var tw = tooltip.outerWidth(true);
    var th = tooltip.outerHeight(true);

    var x = e.pageX;
    var y = e.pageY;
    var w = $(document).width();
    var h = $(document).height();

    // If the tooltip is going to overflow the page, keep it inside
    if (x + tw >= w) {
        x = w - tw;
    }
    if (y + th >= h) {
        y = h - th;
    }

    // Show the tooltip and set it's position
    tooltip.fadeIn('fast').css({
        'left': x,
        'top': y
    });;
});

// When we mouse off we should hide the tooltip (and remove its contents)
itemsToTooltip.mouseout(function () {
    tooltip.stop().fadeOut('fast', function() {
        $(this).text('')
    });
});

请注意，HTML不包含#tooltip元素。这是在DOM负载上创建的。如果您愿意，可以在那里使用它，但如果有任何需要工具提示的项目，它将被附加。

我们的想法是，我们计算出鼠标坐标相对于项目的位置，在那里显示#tooltip并在页面周围碰撞它是否会溢出。

如何创建动态定位的工具提示

1 个答案:

[说明性] HTML

JQuery的