제로 클립 보드를 사용하여 복사 한 후 툴팁을 표시하는 방법은 무엇입니까?

github 및 부트 스트랩 사이트의 동작을 에뮬레이트하려고하는데 "클립 보드로 복사"와 같은 복사를 "복사 됨"으로 변경 한 후에 클립 보드 단추의 툴팁이 변경됩니다. 두 사이트 모두 데이터 복사 된 힌트라는 요소를 사용하는 것으로 보이지만 나에게는 적합하지 않습니다. 또한 jquery를 사용하여 복사 한 후 제목 요소를 수정하려고 시도했지만 다음에 마우스를 가져갈 때 툴팁 만 변경됩니다. 클릭 한 후에 툴팁이 여전히 표시되지 않습니다. 내가해야 할 모든 아이디어?제로 클립 보드를 사용하여 복사 한 후 툴팁을 표시하는 방법은 무엇입니까?

는 다음 (http://plnkr.co/edit/HTXl8Yjz3Wp9iOL5LKr7에서 또한 Plunker에) 내 코드

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script> 

    <button id="myclippy" data-clipboard-text="hello world" title="click to copy" data-copied-hint="you copied the text">hello</button> 
    <input type="text" /> 

    <script type="text/javascript"> 
     var button = document.getElementById("myclippy"); 
     var client = new ZeroClipboard(button); 
    </script> 
</body> 
</html>

출처

2014-12-15 user55295

가장 간단한 솔루션은 aftercopy 이벤트 기간 동안 뭔가에 'generated' tooltip text을 변경하는 것입니다.

//... 
client.on('aftercopy', function(event) { 
     $('.tooltip .tooltip-inner').text('Copied!'); 
    }); 
//...

볼 업데이트 Plunk (CSS를 부트 스트랩과 JS 자신의 간단한 툴팁 작업을 포함)와 영감을 얻을

참고 : (클릭 전후) 툴팁 텍스트의 길이가 다른 경우 이 예제에서 bottom/top 툴 팁은 약간 이동합니다. 왼쪽/오른쪽 툴팁 위치를 사용하거나 새로운 툴팁을 표시하면 작동합니다.

출처

2015-01-09 12:04:45 samuel

근무 (: 좀 더 검색 후 나는이 요점을 발견 Plunk) 복사 후 짧은 텍스트가있는 새로운 툴팁이 표시됩니까? 감사 – crishushu

불행히도 사무엘의 방법은 내가 원하는만큼 잘 작동하지 않았습니다. https://gist.github.com/subchen/4d07dda61f88dcd9320a

사용 global-zeroclipboard-html-bridge 당신이 당신의 예를 업데이트하십시오 수 있습니다 나 메모 (툴팁의 위치)와 관련

eg./

//... 
var $bridge = $("#global-zeroclipboard-html-bridge"); 

client.on("ready", function(e) { 
    $bridge.data("placement", "left").attr("title", "Copy to clipboard").tooltip(); 
    }); 

client.on("aftercopy", function(e) { 
    $bridge.attr("title", "Copied!").tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle"); 
    }); 
//...

출처

2015-05-26 14:00:44 gef

제로 클립 보드를 사용하여 복사 한 후 툴팁을 표시하는 방법은 무엇입니까?

답변

관련 문제