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

编辑：响应评论，听起来你正试图让工具提示出现，而不影响现有元素的定位（从而导致主窗口上的滚动条）。

如果是这种情况，您希望将工具提示的位置定义为绝对位置，因为这会将其从元素流中移除（因此当它出现时不会将页面的其余部分向下推）。

例如，您可以隐藏它：

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

然后，在你的鼠标悬停事件（或任何它被调用的事件）上，将 #tooltip 的top和leftcss 设置为你想要的任何位置，并将显示切换为block. 因为它是绝对定位的，所以不会引起闪烁。

于 2008-10-17T04:25:49.690 回答
1

CSS : 指定工具提示的widthand height，添加overflow: hiddenoroverflow: scroll到它。

position: absolute也可以正常工作，但是当然，您必须指定工具提示的位置top和left位置。

于 2008-10-17T04:29:53.333 回答
1

您可以使用位于 0,0 且宽度和高度设置为 100% 的隐藏 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 回答
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 回答
0

在我看来，您需要的是客户端浏览器窗口中的光标位置。然后，您可以进行计算以放置工具提示，使其不会越界。

我在网上找到的是一篇在不同浏览器中讨论这个问题的短文：鼠标光标位置。也许这可以帮助您解决问题？

更多关于浏览器大小的信息可以在这里找到。

希望能帮助到你。

于 2008-10-17T05:06:55.803 回答
0

今年早些时候我遇到了同样的问题。我修复它的方式：

  1. 我认为垂直滚动是可以的，但水平滚动不是。（总是有足够的空间，所以垂直滚动条不会影响我的布局）
  2. 我固定了工具提示相对于目标的相对垂直位置。（工具提示的顶部总是在锚点底部下方 5px）
  3. 工具提示的左侧是根据屏幕大小设置的。如果整个工具提示可以放在一行上，那就太酷了。否则，我限制了最大宽度并使其环绕。

帮助我实现它的一件事是 Quirksmode 的Find Position文章。

我的解决方案可能不是您正在寻找的，但至少看看 Quirksmode 链接，它很好。

希望有帮助！

于 2008-10-17T14:42:56.187 回答
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 回答
0

可以为您的整个页面/视口大小设置一个幽灵透明 DIV。然后你可以在其中“粘贴”一个工具提示 DIV，提供 CSS float:right 属性。这将为您提供正确的顶部/左侧工具提示角测量值，以进行最终工具提示渲染。

编辑：这应该只针对“边缘情况”的情况。

于 2008-10-17T07:17:49.673 回答
0

您可以尝试确定指针的位置，如果它在视口的右侧 1/4（或您确定的任何区域），则将工具提示放在指针的左侧，否则将其放在右侧。

您提到文本可能会有所不同，但它可能会变得非常大吗？它会占据整个屏幕吗？最有可能的是，它会有一个最大尺寸，因此在决定使用什么阈值来决定尖端应该在右侧还是左侧时，请考虑到这一点。

然后，绝对定位您的tip div，并且为了安全起见，给它一个max-heightandmax-width属性。如果文本确实比这更大，overflow: scroll请在 CSS 中给出。

于 2008-10-17T13:39:50.103 回答