Сохранить всплывающую подсказку в окне браузера? (без использования плагинов) - PullRequest
Новая
       14

Сохранить всплывающую подсказку в окне браузера? (без использования плагинов)

3 голосов
/ 04 марта 2010

Мой код подсказки выглядит следующим образом:

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), но когда в нижней части браузера есть всплывающая подсказка, и она достаточно велика (и есть некоторые большие подсказки, которые я могу ') изменить), всплывающая подсказка будет расширяться за пределы окна браузера, что затруднит его просмотр или прокрутку. Как проверить, будет ли всплывающая подсказка расширяться за пределы окна браузера, а затем перемещать ее соответственно?

1 Ответ

2 голосов
/ 04 марта 2010

Не совсем ответ на ваш вопрос, но почему бы не использовать один из замечательных плагинов для всплывающих подсказок jQuery, которые уже существуют? Мой любимый включен в jQuery Tools . В этом примере показана реализация, которая динамически размещается в зависимости от ее близости к краю области просмотра.

...