保持工具提示在浏览器窗口内? (不使用插件) [英] Keep tooltip inside browser window? (without using plugins)

问题描述

我的工具提示代码如下:

My tool tip code is as follows:

HTML/CSS

a.tooltip span
{
    display: none; 
    padding: 5px; 
    border: 1px solid #000;
    background: #999; 
    position: absolute; 
    color: #fff;
    text-align: left;
}

<a href="#" class="tooltip">[Help]<span>This is the tooltip</span></a>

jQuery:

 $('a.tooltip').hover(
        function(e) {
            $(this).children('span')
                .css('display', 'block')
                .css('width', '300px')
                .css('left', e.pageX + 10)
                .css('top', e.pageY + 10).show();
        },
        function() {
            $(this).children('span').hide();
        }
    ).click(function() {
        return false;
});

这将显示一个位于鼠标位置的工具提示+ 10(X和Y)精细，但是当浏览器底部有一个工具提示并且它足够大时(我可以使用一些大工具提示) (如果更改)，则工具提示将延伸到浏览器窗口之外，从而难以看到或滚动到该窗口.您如何检查工具提示是否会超出浏览器窗口，然后相应地将其移动?

This will show a tooltip positioned at the mouse location + 10 (X and Y) fine, but when there is a tooltip at the bottom of the browser and it is big enough (and there are some large tooltips that I can't change), the tooltip will extend past the browser window making it hard to see or scroll to. How do you go about checking if the tooltip will extend past the browser window and then move it accordingly?

推荐答案

这并不是您的问题的真正答案，但是为什么不使用已经存在的出色的jQuery工具提示插件之一呢?我最喜欢的是 jQuery工具. 此示例展示了根据其与边缘的接近程度而动态放置的实现视口.

Not really an answer to your question, but why not use one of the great jQuery tooltip plugins that are already out there? My favorite is included with jQuery Tools. This example shows an implementation that is placed dynamically based on it's proximity to the edge of the viewport.

这篇关于保持工具提示在浏览器窗口内? (不使用插件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！