Fatal编程技术网
  • javascript/
  • Javascript jQuery弹出气泡/工具提示

Javascript jQuery弹出气泡/工具提示

javascript jquery html css

Javascript jQuery弹出气泡/工具提示,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试创建一个“气泡”，它可以在触发onmouseover事件时弹出，并且只要鼠标位于抛出onmouseover事件的项目上，或者如果鼠标移动到气泡中，它就会保持打开状态。我的泡泡将需要有所有的HTML和样式，包括超链接，图像等方式 我基本上是通过编写大约200行丑陋的JavaScript来实现这一点的，但我真的很想找到一个jQuery插件或其他一些方法来清理这一点 听起来您不希望鼠标悬停在事件上：您需要jQuery hover（）事件 而你似乎想要的是一个“丰富”的工具提示，在这种情况下，

我正在尝试创建一个“气泡”，它可以在触发
onmouseover
事件时弹出，并且只要鼠标位于抛出
onmouseover
事件的项目上，或者如果鼠标移动到气泡中，它就会保持打开状态。我的泡泡将需要有所有的HTML和样式，包括超链接，图像等方式

我基本上是通过编写大约200行丑陋的JavaScript来实现这一点的，但我真的很想找到一个jQuery插件或其他一些方法来清理这一点

听起来您不希望鼠标悬停在事件上：您需要jQuery hover（）事件

而你似乎想要的是一个“丰富”的工具提示，在这种情况下，我建议。通过bodyHandler选项，您可以放入任意HTML。

这也可以通过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);        
};
好的，在一些工作之后，我能够得到一个“泡泡”，在所有合适的时间弹出并离开。仍然需要进行很多样式设计，但这基本上就是我使用的代码

<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>


//--指示鼠标当前位于div上
var onDiv=假；
//--指示鼠标当前位于链接上方
var onLink=false；
//--指示气泡当前存在
var bubbleExists=false；
//--这是超时的ID，如果用户将鼠标移出链接，该超时将关闭窗口
var-timeoutID；
函数addBubbleMouseovers（鼠标覆盖类）{
$（“+mouseover类）.mouseover（函数（事件）{
如果（onDiv | | onLink）{
返回false；
}
onLink=true；
showBubble.call（此事件）；
});
$（“+mouseoverClass）.mouseout（函数（）{
onLink=false；
timeoutID=setTimeout（Hidebuble，150）；
});
}
函数hideBubble（）{
clearTimeout（timeoutID）；
//--如果鼠标不在div上，则隐藏气泡
if（bubbleExists&&！onDiv）{
$（“#bubbleID”）.remove（）；
bubbleExists=false；
}
}
函数showBubble（事件）{
if（bubbleExists）{
隐藏泡泡（）；
}
var tPosX=event.pageX+15；
var tPosY=event.pageY-60；
$（'TESTING！！！！！！！！！！！）.mouseover（keepubbleOpen）。mouseout（letBubbleClose）。appendTo（'body'）；
bubbleExists=true；
}
函数keepBubbleOpen（）{
onDiv=真；
}
函数letBubbleClose（）{
onDiv=假；
隐藏泡泡（）；
}
//--测试！！！！！
$（“文档”）.ready（函数（）{
添加泡泡屋（“临时1”）；
});
下面是附带的html片段：

<a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>
自动调整简单弹出气泡的大小

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>
我已经编写了一个有用的jQuery插件，只需jQuery中的一行代码就可以轻松创建智能气泡弹出窗口

您可以做什么： -将弹出窗口附加到任何DOM元素！ -mouseover/mouseout事件自动管理！ -设置自定义弹出窗口事件！ -创建智能阴影弹出窗口！（也在IE中！） -在运行时选择弹出窗口的样式模板！ -在弹出窗口中插入HTML消息！ -将许多选项设置为：距离、速度、延迟、颜色

Popup的阴影和彩色模板完全受 Internet Explorer 6+、Firefox、Opera 9+、Safari

您可以从

它是麻省理工学院授权的，美观，具备您所需的所有配置

我最喜欢的轻量级选项是。麻省理工学院也有执照。它激发了我们的灵感

我在试着制造一个可以 onmouseover事件启动时弹出 被解雇，并将保持开放，只要 鼠标位于投掷的物品上方 onmouseover事件，或者如果鼠标 移动到气泡中。我的泡泡 将需要有html的所有方式 和样式，包括超链接， 图像等

所有这些事件都完全由这个插件管理

是我见过的最漂亮的

虽然qTip（公认的答案）很好，但我开始使用它，它缺少一些我需要的功能

然后我偶然发现——它非常灵活，而且非常易于使用。（我可以做我需要的事情）

QTip在jquery1.4.2中有bug。我不得不切换到jQuery Bubble弹出窗口，它工作得很好

jQuery Bubble Popup插件的新版本3.0支持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

下载最新版本或访问

也是一个很好的库。

您可以使用qTip；不过，在mouseover事件中启动它需要编写一些代码；如果你想在你的文本字段中添加默认水印，你必须使用水印插件

我意识到这会导致大量重复代码；因此，我在qTip之上编写了一个插件，它可以很容易地将信息弹出窗口附加到表单字段。您可以在这里查看：

希望这能有所帮助。

嘿，谢谢你的快速回复！我只是浏览了一下文档，我不确定是否有一个选项可以让“工具提示”保持在一个固定位置，以便您可以将鼠标移动到它上并单击链接。你用过这个吗 
<!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>

$(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;
    });
  }); 
});

/* 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); 
}