jquery tooltip / перемещается с помощью мыши, перемещается / подсказка с позицией мыши - PullRequest
Новая
       19

jquery tooltip / перемещается с помощью мыши, перемещается / подсказка с позицией мыши

2 голосов
/ 26 апреля 2011

Подсказка jQuery Tools мне подходит!

Но я хочу, чтобы он двигался движением мыши (всплывающая подсказка относительно положения мыши). Как я могу это сделать? Или есть какой-нибудь другой плагин таким образом?

Ответы [ 5 ]

18 голосов
/ 01 марта 2013

jQuery UI теперь включает в себя виджет .tooltip() начиная с версии 1.9, и теперь он предоставляет опцию track: true, чтобы подсказки следовали за мышью.Просто укажите его в качестве опции при инициализации виджета: 

$( document ).tooltip({
    track: true
});

Смотрите это в действии здесь: http://jqueryui.com/tooltip/#tracking

Это полезно, если вы уже используете пользовательский интерфейс jQuery и не хотитевключить другую библиотеку.Проверьте API для более подробной информации об этом виджете: http://api.jqueryui.com/tooltip/

1 голос
/ 18 июля 2012

Я делаю это с помощью всплывающей подсказки jQuery Tools 

$('#selector').mousemove(function(e) { 
  $('.tooltip').css('left', e.pageX + 5).css('top', e.pageY - 25).css('display', 'block');
})

, где .tooltip - класс css

0 голосов
/ 10 ноября 2016

$(function(){ window.onmousemove = function (e) { var tooltips = $('div.ui-tooltip'); var x = (e.clientX + 10) + 'px', y = (e.clientY + 10) + 'px'; for (var i = 0; i < tooltips.length; i++) { tooltips[i].style.top = y; tooltips[i].style.left = x; } }; });

Если вы используете всплывающую подсказку jquery-ui, этот фрагмент кода сработает!

0 голосов
/ 05 апреля 2015

HTML 

<div id="tooltipWindow" class="tooltipContainer">
    <div></div>
</div>

CSS (Добавьте стили, как вы хотите, в приведенном ниже скрипте я также добавил класс прикрепленного элемента к div-подсказке) 

<style>
    .tooltipContainer {
        position: fixed;
        height: auto;
        width: auto;
        background: ghostwhite;
        padding: 10px;
    }
</style>

JAVASCRIPT (jQuery, не забудьте включить библиотеку jQuery, я также добавил тег include) 

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script>
    //Following Tooltip
    $('.elementClassName').mousemove(function(e) {
        if ($(this).attr('title') != "") {
            $('#tooltipWindow div').html($(this).attr('title'));
            $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
            $('#tooltipWindow').show();
        }
    });
    $('.elementClassName').mouseleave(function (e) {
        $('#tooltipWindow').hide();
        });
    }

    //Non Following Tooltip
    $('.elementClassName').hover(function(e) {
        if ($(this).attr('title') != "") {
            $('#tooltipWindow div').html($(this).attr('title'));
            $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
            $('#tooltipWindow').show();
        }
    },function (e) {
        $('#tooltipWindow').hide();
        });
    }

</script>
0 голосов
/ 26 апреля 2011

Я не думаю, что это возможно сделать с плагином jQuery TOOLS.

Плагин Bassistance Tooltip поддерживает то, что вы хотите.Используйте track: true, как в этой демонстрации : 

$('#yahoo a').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    showBody: " - ", 
    fade: 250 
});

Если вам не нравится этот плагин, qTip2 также поддерживает отслеживание мыши.См. это демо (эквивалент jsFiddle здесь ). 

$('#demo-mouse').qtip({
    content: 'I position myself at the current mouse position',
    position: {
        my: 'top left',
        target: 'mouse',
        viewport: $(window), // Keep it on-screen at all times if possible
        adjust: {
            x: 10,  y: 10
        }
    },
    hide: {
        fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
    },
    style: 'ui-tooltip-shadow'
});
...