라벨의 호버에 툴팁을 표시 하시겠습니까?

Question

아래 HTML 코드가 있습니까?

<label for="male">Hello This Will Have Some Value</label> 

하지만 실제로는이 긴 라벨을 표시 할 공간이 충분하지 않습니다. 그래서 나는 다음과 같이 라벨을 만들 생각 ..

<label for="male">Hello...</label> 

그런 다음 내가 사용자가 Hello...에 마우스를 가져 가면

<input type="hidden" name="Language" value="Hello This Will Have Some Value"> 

지금 내가 숨겨진 필드의 값을 표시 할 수 있습니다

전체 라벨 값을 보유 할 숨겨진 필드를 만들 Hello This Will Have Some Value jquery를 사용하여 툴팁에?

감사합니다.

Answer 1

라벨 태그에 "제목 속성"을 사용할 수 있습니다.

<label title="Hello This Will Have Some Value">Hello...</label> 

당신이 모습을 더 세밀하게 제어해야 할 경우

,

1. 아래 그림과 같이 http://getbootstrap.com/javascript/#tooltips을 시도하십시오. 그러나 부트 스트랩을 포함해야합니다.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hello This Will Have Some Value">Hello...</button> 

2. 시도하십시오 https://jqueryui.com/tooltip/. 그러나 jQueryUI를 포함해야합니다.

<script type="text/javascript"> 
$(document).ready(function(){ 
$(this).tooltip(); 
}); 
</script> 

Answer 2

당신은 HTML에 title 속성을 사용할 수 있습니다 :

<label title="This is the full title of the label">This is the...</label> 

당신이 짧은 순간을 위해 마우스를 이상 유지하면 전체 제목을 포함, 상자와 팝업합니다.

더 많은 제어가 필요하다면 jQuery의 Tipsy Plugin을 살펴 보는 것이 좋습니다. http://onehackoranother.com/projects/jquery/tipsy/에서 찾을 수 있으며 사용법은 매우 간단합니다. jQuery를 사용

<label for="male" title="Hello This Will Have Some Value">Hello...</label> 

: 당신은 CSS3를 사용할 수있는 경우

<label for="male" data-title="Language" /> 
<input type="hidden" name="Language" value="Hello This Will Have Some Value"> 

$("label").prop("title", function() { 
    return $("input[name='" + $(this).data("title") + "']").text(); 
}); 

, 사용할 수있는 text-overflow: ellipsis; 그렇게 당신을 위해 당신이 필요로하는 모든 줄임표를 처리 할 수 ​​

Answer 3

그냥 라벨에 제목을 설정 jQuery를 사용하여 레이블의 텍스트를 제목 속성으로 복사하는 것입니다.

HTML :

<label for="male">Hello This Will Have Some Value</label> 

CSS :

label { 
    display: inline-block; 
    width: 50px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

jQuery를 :

$("label").prop("title", function() { 
    return $(this).text(); 
}); 

예 : 강력하고 크로스 브라우저 지원이 필요한 경우 http://jsfiddle.net/Xm8Xe/

마지막으로, 당신은 할 수을 사용하십시오.. 당신은 또한 jQuery를 UI가있는 경우

Answer 4

, 당신은이를 추가 할 수 있습니다

$(document).ready(function() { 
    $(document).tooltip(); 
}); 

그런 다음 제목 대신 숨겨진 입력이 필요합니다. RGraham은 이미 다음과 같은 답변을 게시했습니다. P

Answer 5

숨김 필드를 사용할 필요가 없습니다. "title"속성을 사용하십시오. 브라우저 기본 툴팁이 표시됩니다. 그런 다음 앞서 언급 한 부트 스트랩 툴팁과 같은 jQuery 플러그인을 사용하여 사용자 정의 된 툴팁을 표시 할 수 있습니다.

힌트 : css를 사용하여 상자에 맞지 않는 텍스트를자를 수 있습니다 (텍스트 오버 플로우 속성). http://jsfiddle.net/8eeHs/

Answer 6

표준 툴팁을 사용하여 찾을 수 있습니까?

<label for="male" title="Hello This Will Have Some Value">Hello...</label> 

과 같은 제목 속성을 사용할 수 있습니다. 레이블이있는 요소에 동일한 값의 title 속성을 추가 할 수 있습니다.

Answer 7

부트 스트랩의 툴팁은 훌륭하지만, jQuery UI에는 매우 유용한 툴팁 기능이 있습니다. 이것에 대한 내용은 here입니다. 예

: 당신은 이미 당신의 머리에 jQuery를하고 jQueryUI 라이브러리를 참조하는 한 가정 그리고

<label for="male" id="foo" title="Hello This Will Have Some Value">Hello...</label> 

,이 같은 스크립트 요소를 추가 :

이

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(this).tooltip(); 
}); 
</script> 

이 제목의 내용을 표시합니다 title 속성을 사용하여 요소를 롤오버 할 때의 툴팁 속성입니다.