5

要素の上にマウスを置くと、ヒントが表示されます。ヒントがページからはみ出し、スクロールバーがトリガーされ、レイアウトが変更されて、ヒントをトリガーした基になる要素がマウス ポインターの下になくなり、ヒントが消えます。

ヒントがなくなると、スクロールバーもなくなり、マウスが再び要素の上に置かれます。

洗って、すすいで、繰り返します。

スクロールバーをトリガーするためにヒントが大きすぎないことを確認できれば、それで問題は解決します。

編集：コメントを読んだ後、明確にするべきことがいくつかあります：divには、異なるテキストが含まれています。できれば全文を表示したい。div の位置は、マウスの先端が上にある要素の近くにある必要があります。重要なのは、テキストを切り捨てるかどうかを知る必要があるということです。

私はこのリンクを見つけました:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
には、このパズルのピースが含まれており、ブラウザウィンドウの大きさを把握しています: 

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}
4

9 に答える 9

1

これが私が最終的に使用したコードで、動作しているようです。

function display_popup(s)
{ 

    var popup = document.getElementById("popup");
    popup.innerHTML = s

    //viewport_height = $(document).height()  doesn't work
    viewport_height = get_viewport_size()[1] // does this factor in scrollbar?

    mytop = $(current_element).offset().top + $(current_element).height() + 4
    scroll_offset_y = $(document).scrollTop()
    y_in_viewport = mytop - scroll_offset_y

    if (y_in_viewport < viewport_height) // are we even visible?
    {
        // Display the popup, but truncate it if it overflows   
        // to prevent scrollbar, which shifts element under mouse
        // which leads to flicker...

        popup.style.height= ""
        popup.style.display = "block";

        if (y_in_viewport + popup.offsetHeight > viewport_height)
        {
            overflow = (y_in_viewport + popup.offsetHeight) - viewport_height

            newh = popup.offsetHeight -  overflow
            newh -= 10 // not sure why i need the margin..

            if (newh > 0)
            {
                popup.style.height = newh 
            }
            else
            {
                popup.style.display = "none";
            }
        }
        popup.style.left = $(current_element).offset().left + 40
        popup.style.top = mytop
    }
}


function get_viewport_size()
{
  var myWidth = 0, myHeight = 0;

  if( typeof( window.innerWidth ) == 'number' )
  {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  }
  else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
  {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  }
  else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
  {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }

  return [myWidth, myHeight];
}
于 2008-10-30T11:42:45.117 に答える
1

編集: コメントに応じて、既存の要素の配置に影響を与えずに (したがって、メイン ウィンドウにスクロールバーを発生させずに)、ツールチップを表示しようとしているように思えます。

その場合は、ツールチップの位置を絶対位置として定義します。これにより、要素の流れからツールチップが削除されます (したがって、表示されたときにページの残りの部分が押し下げられることはありません)。

たとえば、非表示で開始できます。

#tooltip {
  position: absolute;
  height: 100px;
  width: 200px;
  border: 1px solid #444444;
  background-color: #EEEEEE;
  display: none;
}

次に、マウスオーバー イベント (またはそれが呼び出されたもの)で、 #tooltipのtopとcss を必要な場所に設定し、表示を に切り替えます。絶対に配置されているため、ちらつきは発生しません。leftblock

于 2008-10-17T04:25:49.690 に答える
1

CSS : ツールチップのwidthand を指定し、 orをheight追加します。overflow: hiddenoverflow: scroll

position: absoluteも問題なく動作しますが、もちろん、ツールチップの位置topとleft位置を指定する必要があります。

于 2008-10-17T04:29:53.333 に答える
1

画面のクライアント領域を測定するための「尺度」として、幅と高さが 100% に設定された 0,0 に配置された非表示の DIV を使用できます。

ツールチップ ウィンドウのサイズがわかっている場合は、クライアント ウィンドウにクリップするか、表示位置を変更して境界内に留まるように移動できます。

以下のいくつかのコード（テストされていない、別のプロジェクトからリッピングされ、インラインで名前が変更された）

var toolTipDiv; //this is your tooltip div element
//call AdjustToolTipPosition(window.event);
function AdjustToolTipPosition(e)
{
    var cpos = getPosition(e);
    mouseX = cpos.x;
    mouseY = cpos.y;

    //Depending on IE/Firefox, find out what 
    //object to use to find mouse position

    toolTipDiv.style.visibility = "visible";

    //backdrop 'yardstick' for client area measurement
    var backdropDiv = document.getElementById("divBackdrop");

    //make sure floating box doesn't leave the screen
    //we know box is 200x200 plus margins, say 215x215
    if ((cpos.y + 215) > backdropDiv.offsetHeight)
    {
        cpos.y = backdropDiv.offsetHeight - 215;
    }
    if ((cpos.x + 215) > backdropDiv.offsetWidth)
    {
        cpos.x = backdropDiv.offsetWidth - 215;
    }
    toolTipDiv.style.left = cpos.x + "px";
    toolTipDiv.style.top = cpos.y + "px";
}
//this function courtesy of 
//http://hartshorne.ca/2006/01/23/javascript_cursor_position/
function getPosition(e) 
{
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) 
    {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    }
    else 
    {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}
于 2008-10-17T05:20:09.363 に答える
0

ポインターがどこにあるかを判断してみてください。ポインターがビューポートの右 1/4 (または決定した領域) にある場合は、ツール ヒントをポインターの左側に置き、そうでない場合は右側に置きます。

テキストが変わる可能性があるとおっしゃいましたが、非常に大きくなる可能性はありますか? それ自体が画面全体を占める可能性はありますか? ほとんどの場合、最大サイズがあるため、先端を右または左に配置するかどうかを決定するために使用するしきい値を決定する際には、それを考慮してください。

次に、ヒント div を絶対に配置し、安全のためにmax-heightandmax-width属性を付けます。テキストがそれよりも大きくなる場合overflow: scrollは、CSS で指定してください。

于 2008-10-17T13:39:50.103 に答える
0

私は今年の初めにこの同じ問題を抱えていました。私がそれを修正した方法：

  1. 縦スクロールは問題ないと思いましたが、横スクロールは問題ありません。（垂直スクロールバーが私のレイアウトに影響を与えないように、常に十分なスペースがありました）
  2. ターゲットに対するツールチップの相対的な垂直位置を修正しました。(ツールチップの上部は、常にアンカーの下部より 5px 下にありました)
  3. ツールチップの左側は画面サイズに合わせて設定しました。ツールチップ全体が 1 行に収まる場合は、クールです。それ以外の場合は、最大幅を制限して折り返すようにしました。

これを実装するのに役立ったのは、Quirksmode のFind Position記事でした。

私の解決策は、まさにあなたが探しているものではないかもしれませんが、少なくとも Quirksmode のリンクを見てください。

それが役立つことを願っています!

于 2008-10-17T14:42:56.187 に答える
0

ページ全体/ビューポートのサイズとまったく同じゴースト透過 DIV を設定することは可能です。次に、CSS float:right 属性を提供して、その中にツールチップ DIV を「貼り付ける」ことができます。これにより、最終的なツールチップのレンダリングのために、ツールチップの上部/左隅の正しい測定値が得られます。

編集：これは「エッジ状況」の場合にのみ行う必要があります。

于 2008-10-17T07:17:49.673 に答える
0

必要なのは、クライアント ブラウザ ウィンドウ内のカーソル位置です。次に、計算を行ってツールチップを配置し、境界を越えないようにすることができます。

Web で見つけたのは、さまざまなブラウザーでこれについて説明している短い記事です: Mouse Cursor Position。多分これはあなたの問題を解決するのに役立つでしょうか？

また、ブラウザーのサイズに関する詳細情報は、こちらで確認できます。

それが役に立てば幸い。

于 2008-10-17T05:06:55.803 に答える
0

ページのどちら側が近いかに応じて、要素の左または右にツールチップを配置することをお勧めします。ツールチップの幅を固定し、コンテンツを入力して必要に応じて表示し、マウスの位置に応じて配置します。ツールチップが有効な場合の onmousemove イベント ハンドラーの重要な部分は次のとおりです。

if (!e) var e = window.event;
if(e) {
    var posx = 0;
    var posy = 0;

    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }

    var overflowX = (document.body.clientWidth + document.body.scrollLeft + document.documentElement.scrollLeft) - (posx + 25+ tooltip.clientWidth);
    if(overflowX < 0) posx -= 25+ (tooltip.clientWidth);

    var overflowY = (document.body.clientHeight + document.body.scrollTop + document.documentElement.scrollTop) - (posy + 15+ tooltip.clientHeight);
    if(overflowY < 0) posy += overflowY;

    tooltip.style.left=(10+posx);
    tooltip.style.top=(10+posy);
}
于 2008-10-17T17:59:52.277 に答える