-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('')
    });
});

#tooltipHTML には要素が含まれていないことに注意してください。これは DOM ロード時に作成されます。必要に応じてそこに置くこともできますが、ツールチップが必要なアイテムがある場合は追加されます。

アイデアは、マウスの座標がアイテムに対してどこにあるかを調べ、#tooltipそこに表示し、オーバーフローする場合はページの周りにぶつけるというものです。

于 2013-09-18T16:37:59.700 に答える