Получение пользовательских подсказок с JQuery

Question

Я ищу образец кода JQuery или библиотеку для отображения всплывающих подсказок при наведении курсора на элемент. В частности, я хочу, чтобы при наведении мыши отображался мой собственный элемент

, а не автоматически создаваемая подсказка или элемент «загружен из узла». Я посмотрел на пару плагинов для всплывающей подсказки JQuery, и все они, похоже, не могут этого сделать, но очень сложны в других отношениях. Это похоже на то, что JS / JQuery должен составить всего пару строк, но я также не смог найти никаких рабочих руководств.

Идеальное решение будет также работать с всплывающими подсказками рядом с границами, иметь параметр «закрепление всплывающей подсказки», иметь возможность загружать HTML, отображаемый в виде всплывающей подсказки, с использованием AJAX (в отличие от встроенного в HTML / JS), и хорошо справляться с большим количеством всплывающих подсказок (только по одной, разумеется).

Answer 1

Ну, я не могу предложить вам полное решение, но заставить div отображаться в виде всплывающей подсказки довольно просто:

(function($){

    var $div = $('<div/>').css({
        position: 'absolute',
        background: 'white',
        border: '1px solid black',
        padding: '10px',
        zIndex: 999,
        display: 'none'
    }).appendTo('body');

    $('a.tooltip')
        .mousemove(function(e){
            $div.css({
                top: e.pageY + 10 + 'px',
                left: e.pageX + 10 + 'px'
            });
        })
        .hover(function(){
            $div.show().html('Text to display...');
        }, function(){
            $div.hide();
        });

})(jQuery);

Пример -> http://jsbin.com/emoso

Answer 2

Вот отличная подсказка https://z -progrock.com / заказ подсказке-используя-JQuery /

Answer 3

Простая подсказка в Jquery waqzah.wordpress.com

Answer 4

Хорошо, у меня наконец было время вернуться к этому, и вот что я остановился на этом. Я вполне доволен этим в целом; Единственная проблема, которую я заметил, - если у вас есть элемент с всплывающей подсказкой в ​​правом нижнем углу окна, так что подсказка не имеет места для отображения между элементом и границей окна, он появится сверху элемент и начинает мерцать, когда фокус переходит между элементом и всплывающим окном. Приветствуются советы по решению этой проблемы или общие замечания по моему стилю JS (я раньше писал очень мало JS-кода).

Функция JavaScript:

function showInfoBox(parent_index, parent) {

var parent_id = $(this).attr('id');
var infobox_id = parent_id+"_ib";
$("body").append("<div class='infobox' id='"+infobox_id+"'><p>This is an infobox for "+parent_id+"</p></div>"); //customize here
var infobox = $("#"+infobox_id);

$(this).mousemove(function(e){
    var pad = 10;
    var x = Math.min(e.pageX + pad, $(window).width() - infobox.width() - pad);
    var y = Math.min(e.pageY + pad, $(window).height() + $(window).scrollTop() - infobox.height() - pad);
    infobox.css({
        top:  y + 'px',
        left: x + 'px'
    });
})
    .hover(function(){
        infobox.show();
    }, function(){
        infobox.hide();
    });

};

JQuery для вызова при загрузке документа:

$(".SELECTOR-FOR-STUFF-TO-GET-INFOBOXES").each(showInfoBox);

Требуемый CSS:

.infobox { display:none; position:absolute; z-index:999; /* more CSS if you like */}

Answer 5

Мне очень нравится jTip , который позволяет вам приятно работать даже в режиме AJAX с асинхронной загрузкой внешнего ресурса для контента.

Answer 6

плагин подсказки jquery , кажется, может делать все, что вы хотите. Вы можете использовать bodyHandler: function(), чтобы определить, какой должна быть подсказка И это может быть div, который вы определили (который можно даже заполнить с помощью ajax, когда он собирается отображаться). См. Второй пример здесь, Я понятия не имею о липкой всплывающей подсказке, но все остальные функции предоставлены здесь.