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 로 전환해야했는데 잘 작동합니다!

나에게 당신은 이벤트 위로 마우스를 원하지 않는 것 같습니다 : 당신은 jQuery hover () 이벤트를 원합니다.

그리고 당신이 원하는 것은 "풍부한"툴팁입니다.이 경우 jQuery 툴팁을 제안 합니다. bodyHandler 옵션을 사용하면 임의의 HTML을 넣을 수 있습니다.

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

이 플러그인으로 완전히 관리되는 모든 이벤트 ...

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

ColorTip 은 내가 본 것 중 가장 아름답습니다.

jQuery Bubble Popup 플러그인의 새 버전 3.0은 현재 가장 유명한 자바 스크립트 라이브러리의 안정적인 최신 버전 인 jQuery v.1.7.2를 지원합니다.

3.0 버전의 가장 흥미로운 기능은 플러그인이 비 호환성 문제를 방지하기 위해 완전히 캡슐화되어 있기 때문에 Script.aculo.us, Mootols 또는 Prototype과 같은 다른 라이브러리 및 자바 스크립트 프레임 워크와 함께 jQuery & Bubble Popup 플러그인을 함께 사용할 수 있다는 것입니다.

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을 사용할 수 있습니다. 그러나 마우스 오버 이벤트에서 실행하려면 약간의 코드를 작성해야합니다. 텍스트 필드에 기본 워터 마크가 필요한 경우 워터 마크 플러그인을 사용해야합니다.

나는 이것이 많은 반복적 인 코드로 이어진다는 것을 깨달았습니다. 그래서 qTip 위에 플러그인을 작성하여 정보 팝업을 필드에 쉽게 첨부 할 수 있도록했습니다. https://bitbucket.org/gautamtandon/jquery.attachinfo 에서 확인할 수 있습니다.

도움이 되었기를 바랍니다.