Я пытаюсь создать "пузырь", который может появиться, когда событие onmouseover запущено и останется открытым, пока мышь находится над элементом, который выбросил событие onmouseover ИЛИ, если мышь перемещена в пузырь. Мой пузырь должен будет иметь все манеры HTML и стилей, включая гиперссылки, изображения и т.д.
В основном я это сделал, написав около 200 строк уродливого JavaScript, но мне бы очень хотелось найти плагин jQuery или какой-то другой способ немного почистить его.
Qtip - лучшая из тех, что я видел. Это лицензия MIT, красивая, имеет всю необходимую конфигурацию.
Моя любимая легкая опция tipsy. Также лицензирован MIT. Он вдохновил плагин для всплывающей подсказки.
Это можно сделать легко с помощью события mouseover. Я сделал это, и он не принимает 200 строк. Начните с запуска события, затем используйте функцию, которая создаст всплывающую подсказку.
$('span.clickme').mouseover(function(event) {
createTooltip(event);
}).mouseout(function(){
// create a hidefunction on the callback if you want
//hideTooltip();
});
function createTooltip(event){
$('<div class="tooltip">test</div>').appendTo('body');
positionTooltip(event);
};
Затем вы создаете функцию, которая позиционирует всплывающую подсказку с положением смещения DOM-элемента, который инициировал событие mouseover, это выполнимо с помощью css.
function positionTooltip(event){
var tPosX = event.pageX - 10;
var tPosY = event.pageY - 100;
$('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};
Хотя qTip (принятый ответ) хорош, я начал использовать его, и ему не хватало некоторых функций, которые мне нужны.
Затем я наткнулся на PoshyTip - он очень гибкий и очень прост в использовании. (И я мог бы делать то, что мне нужно)
Хорошо, после некоторой работы я могу получить "пузырь", чтобы всплывать и уходить в нужное время. Существует много стилей, которые должны произойти, но это в основном код, который я использовал.
<script type="text/javascript">
//--indicates the mouse is currently over a div
var onDiv = false;
//--indicates the mouse is currently over a link
var onLink = false;
//--indicates that the bubble currently exists
var bubbleExists = false;
//--this is the ID of the timeout that will close the window if the user mouseouts the link
var timeoutID;
function addBubbleMouseovers(mouseoverClass) {
$("."+mouseoverClass).mouseover(function(event) {
if (onDiv || onLink) {
return false;
}
onLink = true;
showBubble.call(this, event);
});
$("." + mouseoverClass).mouseout(function() {
onLink = false;
timeoutID = setTimeout(hideBubble, 150);
});
}
function hideBubble() {
clearTimeout(timeoutID);
//--if the mouse isn't on the div then hide the bubble
if (bubbleExists && !onDiv) {
$("#bubbleID").remove();
bubbleExists = false;
}
}
function showBubble(event) {
if (bubbleExists) {
hideBubble();
}
var tPosX = event.pageX + 15;
var tPosY = event.pageY - 60;
$('<div ID="bubbleID" style="top:' + tPosY + '; left:' + tPosX + '; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;">TESTING!!!!!!!!!!!!</div>').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo('body');
bubbleExists = true;
}
function keepBubbleOpen() {
onDiv = true;
}
function letBubbleClose() {
onDiv = false;
hideBubble();
}
//--TESTING!!!!!
$("document").ready(function() {
addBubbleMouseovers("temp1");
});
</script>
Вот фрагмент html, который идет с ним:
<a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>
Я запрограммировал полезный плагин jQuery для создания всплывающих подсказок с интеллектуальными пузырьками с помощью только строки кода в jQuery!
Что вы можете сделать: - прикреплять всплывающие окна к любому элементу DOM! - события mouseover/mouseout автоматически управляются! - устанавливать специальные всплывающие окна! - создавать смарт-затененные всплывающие окна! (в IE тоже!) - выбирать шаблоны стиля всплывающих окон во время выполнения! - вставлять HTML-сообщения внутри всплывающих окон! - установить множество опций как: расстояния, скорость, задержки, цвета...
Всплывающие тени и раскрашенные шаблоны полностью поддерживаются Internet Explorer 6+, Firefox, Opera 9+, Safari
Вы можете скачать источники из http://plugins.jquery.com/project/jqBubblePopup
QTip имеет ошибку с jQuery 1.4.2. Мне пришлось переключиться на jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples, и он отлично работает!
Звучит для меня, что вы не хотите мышь над событиями: вам нужно событие jQuery hover().
И то, что вам кажется нужным, - это "богатая" подсказка, и в этом случае я предлагаю подсказку jQuery. С помощью опции bodyHandler вы можете разместить произвольный HTML-код.
Я пытаюсь создать "пузырь", который может всплывающее окно, когда событие onmouseover и будет оставаться открытым до тех пор, пока мышь над предметом, который бросил событие onmouseover ИЛИ, если мышь перемещается в пузырь. Мой пузырь должны будут иметь все манеры html и стиль, включая гиперссылки, изображения и т.д.
Все эти события полностью управляются этим плагином...
ColorTip - самый красивый, который я когда-либо видел
Новая версия 3.0 плагина jQuery Bubble Popup поддерживает jQuery v.1.7.2, в настоящее время последнюю и стабильную версию самой известной библиотеки javascript.
Самая интересная особенность версии 3.0 заключается в том, что вы можете использовать совместно jQuery и Bubble Popup плагин с любыми другими библиотеками и фреймворками javascript, такими как Script.aculo.us, Mootols или Prototype, потому что плагин полностью инкапсулирован, чтобы предотвратить несовместимость проблемы;
jQuery Bubble Popup был протестирован и поддерживает множество известных и "неизвестных" браузеров; см. документацию для полного списка.
Как и предыдущие версии, плагин jQuery Bubble Popup продолжает выпускаться под лицензией MIT; Вы можете использовать jQuery Bubble Popup в коммерческих или личных проектах до тех пор, пока заголовок авторского права останется нетронутым.
загрузите последнюю версию или посетите демонстрационные ролики и обучающие материалы в http://www.maxvergelli.com/jquery-bubble-popup/
Авторезистировать простой всплывающий пузырь
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="bubble.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="bubble.js"></script>
</head>
<body>
<br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 1">Set cursor</div>
</div>
<br/><br/><br/><br/>
<div class="bubbleInfo">
<div class="bubble" title="Text 2">Set cursor</div>
</div>
</body>
</html>
bubble.js
$(function () {
var i = 0;
var z=1;
do{
title = $('.bubble:eq('+i+')').attr('title');
if(!title){
z=0;
} else {
$('.bubble:eq('+i+')').after('<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td>'+title+'</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>');
$('.bubble:eq('+i+')').removeAttr('title');
}
i++;
}while(z>0)
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.bubble', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -40,
left: 10,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
bubble.css
/* Booble */
.bubbleInfo {
position: relative;
width: 500px;
}
.bubble {
}
.popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
font-size: .8em;
}
.popup td.corner {
height: 13px;
width: 15px;
}
.popup td#topleft {
background-image: url(bubble/bubble-1.png);
}
.popup td.top {
background-image: url(bubble/bubble-2.png);
}
.popup td#topright {
background-image: url(bubble/bubble-3.png);
}
.popup td.left {
background-image: url(bubble/bubble-4.png);
}
.popup td.right {
background-image: url(bubble/bubble-5.png);
}
.popup td#bottomleft {
background-image: url(bubble/bubble-6.png);
}
.popup td.bottom {
background-image: url(bubble/bubble-7.png);
text-align: center;
}
.popup td.bottom img {
display: block;
margin: 0 auto;
}
.popup td#bottomright {
background-image: url(bubble/bubble-8.png);
}
Tiptip также является хорошей библиотекой.
Вы можете использовать qTip для этого; Однако вам придется немного закодировать для запуска его на событие mouseover; И если вы хотите использовать водяной знак по умолчанию в своих текстовых полях, вам придется использовать плагин водяных знаков...
Я понял, что это приводит к множеству повторяющихся кодов; Таким образом, я написал плагин поверх qTip, который позволяет легко подключать информационное всплывающее окно для формирования полей. Вы можете проверить это здесь: https://bitbucket.org/gautamtandon/jquery.attachinfo
Надеюсь, что это поможет.