Twitter 부트 스트랩을 사용한 툴팁
저는 Twitter Bootstrap을 사용하고 있으며 프론트 엔드 개발자가 아닙니다! 그러나 그것은 그 과정을 거의-감히 말하지만-재미있게 만들고 있습니다!
툴팁에 대해 약간 혼란 스럽습니다. 그들은 문서에서 다루고 있지만 Twitter는 약간의 지식을 가정합니다. 예를 들어 다음 JavaScript 코드로 툴팁을 트리거한다고 말합니다.
$('#example').tooltip(options)
소스를 살펴본 후 도구 설명이있는 필드가 클래스에 있어야하고 다음 코드를 실행해야한다는 것을 깨달았습니다.
$('.tooltipclass').tooltip(options)
하지만 이제 내 질문은 왜 Twitter Bootstrap이 그러한 수업을 제공하지 tooltip않습니까? 더 큰 구성을 허용하기 위해? 에 툴팁이있는 개별 요소를 추가하는 것이 더 낫습니까 tooltipclass, 아니면에 주변 영역을 추가해야 tooltipclass합니까? .class이름 식별자 ( #name) 대신 클래스 식별자 ( )를 사용하는 것이 중요합니까 ?
귀하의 질문은 도구 설명을 설정할 때 사용할 적절한 선택기로 요약되며 그에 대한 대답은 거의 원하는 것입니다. 클래스를 사용하여 툴팁을 트리거하려면 그렇게 할 수 있습니다. 예를 들면 다음과 같습니다.
<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>
그런 다음 다음과 .link같이 툴팁으로 첨부 된 클래스 가있는 모든 링크를 트리거 할 수 있습니다 .
$('.link').tooltip()
이제 부트 스트랩 개발자가 정확히 필요하지 않기 때문에 툴팁을 트리거하는 데 클래스를 사용하지 않은 이유에 대한 질문에 대답하려면 (내 개인적으로 좋아하는)와 같이 툴팁을 대상으로 지정하려는 선택기를 거의 사용할 수 있습니다. rel속성. 이 속성을 사용하면 다음과 같이 rel속성이로 설정된 모든 링크 또는 요소를 대상으로 지정할 수 있습니다 tooltip.
$('[rel=tooltip]').tooltip()
그리고 귀하의 링크는 다음과 같습니다.
<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a>
물론 컨테이너 클래스 또는 ID를 사용하여 특정 옵션으로 골라 내고자하는 특정 컨테이너 내부의 툴팁을 대상으로 지정하거나 나머지 콘텐츠와 분리 할 수 있으며 다음과 같이 사용할 수 있습니다.
$('#example').tooltip({
selector: "a[rel=tooltip]"
})
이 선택기는 div rel"내"속성 을 사용하여 모든 툴팁을 대상으로합니다 #example. 이렇게하면 해당 섹션에만 특수 스타일이나 옵션을 추가 할 수 있습니다. 간단히 말해, 툴팁을 대상으로하는 유효한 선택기를 거의 사용할 수 있으며 대상을 지정하기 위해 추가 클래스로 마크 업을 더럽힐 필요가 없습니다.
이것을 사용하는 가장 쉬운 방법은
이것을 헤더에 넣으십시오.
<script>
$(function ($) {
$("a").tooltip()
});
</script>
그리고
<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text">
My link text
</a>
그래서 그 js 코드로 페이지의 어디에나 태그가 있다면 rel="tooltip"부트 스트랩 툴팁 을 얻으십시오.
행운을 빕니다.
이것을 헤더에 추가하십시오
<script>
//tooltip
$(function() {
var tooltips = $( "[title]" ).tooltip();
$(document)(function() {
tooltips.tooltip( "open" );
});
});
</script>
그런 다음 title="your tooltip"요소에 속성 을 추가하십시오.
JS 및 CSS 파일을 포함하고 왜 작동하지 않는지 궁금해서 다음을 추가했을 때 작동했습니다 <head>.
<script>
jQuery(function ($) {
$("a").tooltip()
});
</script>
모든 데이터 토글을 표시하기 만하면됩니다.
jQuery(function () {
jQuery('[data-toggle=tooltip]').tooltip();
});
http://jsfiddle.net/Amged/xUQ6D/19/
That's because these things (I mean tooltip etc) are jQuery plug-ins. And yes, they assume some basic knowledge about jQuery. I would suggest you to look for at least a basic tutorial about jQuery.
You'll always have to define which elements should have a tooltip. And I don't understand why Bootstrap should provide the class, you define those classes or yourself. Maybe you were hoping that bootstrap did automatically some magic? This magic however, can cause a lot of problems as well (unwanted side effects).
This magic can be easily achieved to just write $(".myclass").tooltip(), this line of code does exact what you want. The only thing you have to do is attach the myclass class to those elements that need to apply the tooltip thingy. (Just make sure you run that line of code after your DOM has been loaded. See below.)
$(document).ready(function() {
$(".myclass").tooltip();
});
EDIT: apparently you can't use the class tooltip (probably because it is somewhere internally used!).
I'm just wondering why bootstrap doesn't run the code you specified with some class I can include.
The thing you want produces almost the same code as you have to do now. The biggest reason however they did not do that, is because it causes a lot of trouble. One person wants to assign it to an element with an ID; others want to assign it to elements with a specified classname; and again others want to assign it to one specified element achieved through some selection process. Those 3 options cause extra complexity, while it is already provided by jQuery. I haven't seen many plugins do what you want (just because it is needless; it really doesn't save you code).
Simple use of this:
<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip">
tooltip
</a>
Using jQuery:
$(document).ready(function(){
$('#mytooltip').tooltip();
});
You can left side of tooltip u can simple add this->data-placement="left"
<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a>
참고URL : https://stackoverflow.com/questions/10436231/tooltips-with-twitter-bootstrap
'Program Tip' 카테고리의 다른 글
| C에서 데이터 유형의 최소 및 최대 값 (0) | 2020.10.29 |
|---|---|
| ANSI 색상 코드를 존중하는 Eclipse 콘솔보기? (0) | 2020.10.29 |
| 데이터 프레임의 모든 문자 변수에있는 모든 값을 소문자에서 대문자로 변환 (0) | 2020.10.29 |
| SQL LEFT JOIN 하위 쿼리 별칭 (0) | 2020.10.29 |
| 선택한 열에 대한 테이블의 NA 값을 바꾸는 방법 (0) | 2020.10.29 |