-3

我有一个纯 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>
4

1 回答 1

0

这是一个正在进行的解决方案：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那里显示并在页面溢出时将其撞到页面上。

于 2013-09-18T16:37:59.700 回答