jQuery 팝업 버블 / 툴팁

jQuery 팝업 버블 / 툴팁

---

onmouseover이벤트가 시작될 때 팝업 될 수 있고 마우스가 onmouseover이벤트 를 던진 항목 위에 있거나 마우스가 거품으로 이동하는 한 계속 열려 있는 "거품"을 만들려고합니다 . 내 풍선에는 하이퍼 링크, 이미지 등을 포함한 모든 HTML 및 스타일링이 필요합니다.

기본적으로 약 200 줄의 추악한 JavaScript를 작성하여이 작업을 수행했지만 jQuery 플러그인이나이를 약간 정리하는 다른 방법을 찾고 싶습니다.

---

Qtip은 내가 본 것 중 최고입니다. MIT 라이센스가 있고 아름답고 필요한 모든 구성이 있습니다.

내가 가장 좋아하는 경량 옵션은 기운 입니다. 또한 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);        
};

그런 다음 mouseover 이벤트를 트리거 한 DOM 요소의 오프셋 위치로 도구 설명을 배치하는 함수를 만듭니다.이 작업은 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 요소에 팝업을 첨부하십시오! -마우스 오버 / 마우스 아웃 이벤트 자동 관리! -맞춤 팝업 이벤트 설정! -똑똑한 그림자 팝업을 만드십시오! (IE에서도!)-런타임에 팝업 스타일 템플릿을 선택하십시오! -팝업 안에 HTML 메시지를 삽입하세요! -다양한 옵션 설정 : 거리, 속도, 지연, 색상…

Popup의 그림자와 색상이 지정된 템플릿은 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 로 전환해야했는데 잘 작동합니다!

---

Sounds to me you dn't want the mouse over events: you want the jQuery hover() event.

And what you seem to want is a "rich" tooltip, in which case I suggest jQuery tooltip. With the bodyHandler option you can put arbitrary HTML in.

---

I'm trying to make a "bubble" that can popup when the onmouseover event is fired and will stay open as long as the mouse is over the item that threw the onmouseover event OR if the mouse is moved into the bubble. My bubble will need to have all manners of html and styling including hyperlinks, images, etc.

All those events fully managed by this plugin...

http://plugins.jquery.com/project/jqBubblePopup

---

ColorTip is the most beautiful i've ever seen

---

The new version 3.0 of the jQuery Bubble Popup plugin supports jQuery v.1.7.2, currently the latest and stable version of the most famous javascript library.

The most interesting feature of the 3.0 version is that You can use together jQuery & Bubble Popup plugin with any other libraries and javascript frameworks like Script.aculo.us, Mootols or Prototype because the plugin is completely encapsulated to prevent incompatibility problems;

jQuery Bubble Popup was tested and supports a lot of known and “unknown” browsers; see the documentation for the complete list.

Like previous versions, jQuery Bubble Popup plugin continues to be released under the MIT license; You are free to use jQuery Bubble Popup in commercial or personal projects as long as the copyright header is left intact.

download the latest version or visit live demos and tutorials at http://www.maxvergelli.com/jquery-bubble-popup/

---

Autoresize simple Popup Bubble

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 is also a nice library.

---

You can use qTip for this; However you'd have to code a little for launching it on mouseover event; And in case you want a default watermark on your text fields, you'd have to use the watermark plugin...

I realized that this leads to lot of repetitive code; So I wrote a plugin on top of qTip that makes it really easy to attach informational popup to form fields. You can check it out here: https://bitbucket.org/gautamtandon/jquery.attachinfo

Hope this helps.

참고URL : https://stackoverflow.com/questions/625920/jquery-popup-bubble-tooltip