클릭 시 Twitter Bootstrap Tooltip 콘텐츠 변경
클릭하면 AJAX 요청을 전송하는 앵커 요소에 대한 툴팁이 있습니다.이 요소에는 Twitter 부트스트랩의 도구 설명이 있습니다.AJAX 요청이 성공적으로 돌아왔을 때 툴팁 내용이 변경되기를 원합니다.시작 후 툴팁을 조작하려면 어떻게 해야 합니까?
오늘 소스코드를 보다가 이걸 발견했어요. 그래서.$.tooltip(string)는 내의모함호다출 를 호출합니다.Tooltip 업수를 . 그리고 보시면요.Tooltip.fixTitle그것은 그것을 가져옵니다.data-original-title속성을 지정하고 제목 값을 이 속성으로 바꿉니다.
따라서 다음과 같은 작업을 수행할 수 있습니다.
$(element).tooltip('hide')
.attr('data-original-title', newValue)
.tooltip('fixTitle')
.tooltip('show');
그리고 당연히 툴팁 안에 있는 값인 제목을 업데이트합니다.
더 짧은 방법:
$(element).attr('title', 'NEW_TITLE')
.tooltip('fixTitle')
.tooltip('show');
부트스트랩 3에서는 호출하기에 충분합니다.elt.attr('data-original-title', "Foo")의 변화에 ."data-original-title"속성이 이미 도구 설명 표시의 변경을 트리거했습니다.
업데이트: .tooltip('show')을 추가하여 변경사항을 즉시 표시할 수 있습니다. 제목의 변경사항을 확인하기 위해 대상을 마우스로 이동하거나 마우스로 이동할 필요가 없습니다.
elt.attr('data-original-title', "Foo").tooltip('show');
다음은 부트스트랩 4에 대한 업데이트입니다.
var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
그러나 가장 좋은 방법은 다음과 같습니다.
var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');
또는 인라인:
var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');
UX 측면에서는 텍스트가 페이딩 또는 숨기기/표시 효과 없이 변경되고, 필요하지 않음을 알 수 있습니다._fixTitle.
실제로 표시/숨기기를 호출하지 않고 도구 설명 텍스트를 업데이트할 수 있습니다.
$(myEl)
.attr('title', newTitle)
.tooltip('fixTitle')
.tooltip('setContent')
부트스트랩 4의 경우:
$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");
도구 설명을 닫았다가 다시 열지 않고 텍스트를 변경하려면 여기에 좋은 해결책이 있습니다.
$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)
이런 방식으로, 도구 설명을 닫지 않고 텍스트를 대체합니다(위치를 변경하지는 않지만, 한 단어 변경 등을 수행하는 경우에는 괜찮습니다).도구 설명에서 + 를 마우스로 가리키면 계속 업데이트됩니다.
**이것은 부트스트랩 3입니다. 2의 경우 데이터/클래스 이름을 변경해야 합니다.
도구 설명이 인스턴스화된 경우(javascript를 사용한 경우) 이 기능을 수행할 수 있습니다.
$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
부트스트랩 4
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')
https://getbootstrap.com/docs/4.1/components/tooltips/ #tooltip디스플레이
$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);#topic_1 {
border: 1px solid red;
margin: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<div id="topic_1">Topic 1</div>부트스트랩 3.x의 경우
이것은 가장 깨끗한 해결책인 것 같습니다.
$(element)
.attr('data-original-title', 'New title').tooltip('show')
표시는 제목을 즉시 업데이트하고 도구 설명이 숨겨졌다가 다시 표시될 때까지 기다리지 않는 데 사용됩니다.
그냥 변경할 수 있습니다.data-original-title다음 코드를 사용합니다.
$(element).attr('data-original-title', newValue);
부트스트랩 5에는 없습니다.fixTitle또는_fixTitle이상 해야 했습니다: "Tooltip 객체라는 이름의 Tooltip 객체입니다.
$('a.copy').click(function() {
var tt = bootstrap.Tooltip.getInstance(this);
tt.dispose();
this.setAttribute('title', 'Copied!')
tt = bootstrap.Tooltip.getOrCreateInstance(this);
tt.show();
}
다음은 저에게 가장 효과적이었습니다. 기본적으로 기존 툴팁을 폐기하고 새 툴팁을 표시하지 않습니다.다른 답변처럼 도구 설명에서 표시를 호출하면 커서가 도구 설명 위에 있지 않아도 표시가 나타납니다.
이 솔루션을 선택한 이유는 기존 툴팁을 다시 사용하는 다른 솔루션으로 인해 요소 위에 커서를 올려놓을 때 툴팁이 표시되지 않는 이상한 문제가 발생했기 때문입니다.
function updateTooltip(element, tooltip) {
if (element.data('tooltip') != null) {
element.tooltip('hide');
element.removeData('tooltip');
}
element.tooltip({
title: tooltip
});
}
부트스트랩 5.3
버전 부트버5.3 제는이 .setContent초기화 후 도구 설명 제목을 변경하는 방법입니다.https://getbootstrap.com/docs/5.3/components/tooltips/ #http://methods
var tooltip = bootstrap.Tooltip.getInstance('#elementId');
tooltip.setContent({ '.tooltip-inner': 'another title' });
부트스트랩 4에서는 그냥 사용합니다.$(el).tooltip('dispose');정상적으로 재생성합니다.따라서 도구 설명을 만드는 함수 앞에 배치하여 두 배로 늘어나지 않도록 할 수 있습니다.
상태를 확인하고 가치를 조정해야 하는 것은 덜 우호적인 것처럼 보입니다.
기능으로 툴팁 통화의 내용을 설정할 수 있습니다.
$("#myelement").tooltip({
"title": function() {
return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
}
});
호출된 요소의 제목만 사용할 필요는 없습니다.
이 코드가 저에게 매우 도움이 되었습니다. 저는 이 코드가 제 프로젝트에 효과적이라는 것을 알았습니다.
$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');
나는 아약스와 함께 툴팁에서 제목을 동적으로 변경합니다.
먼저 툴팁을 활성화합니다.
$('[data-message="tooltip"]) 툴팁
그런 다음 제목 속성을 변경한 다음 도구 설명을 다시 시작합니다.
$("#foo").attr('title','TheNewTitle');
$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip()을 사용하지 ..tooltip('show') 개 경우, 아래 예를 의 모든 후 하면 예기치 않은 됩니다.
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="tooltip"]').mouseover((e) => {
let self = $(e.target);
setTimeout(function() { // ajax call
self.attr('data-original-title', 'New Value of ' + self.text())
.tooltip('show');
}, 3000);
})span{margin: 20px;font-weight: bold}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<span data-toggle="tooltip" title="Text 1">Text 1</span>
<span data-toggle="tooltip" title="Text 2">Text 2</span>
<span data-toggle="tooltip" title="Text 3">Text 3</span>은 더나방은편것입다니는집하법은다▁editing▁the것▁by니입을 편집하는 것입니다.data-original-title그리고..tooltip-inner
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="tooltip"]').mouseover((e) => {
let self = $(e.target);
setTimeout(function() { // ajax call
let newValue = 'New Value of ' + self.text();
self.attr('data-original-title', newValue)
$('.tooltip-inner').html(newValue)
}, 3000);
})span{margin: 20px;font-weight: bold}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<span data-toggle="tooltip" title="Text 1">Text 1</span>
<span data-toggle="tooltip" title="Text 2">Text 2</span>
<span data-toggle="tooltip" title="Text 3">Text 3</span>기존 툴팁을 삭제하여 새로운 툴팁 콘텐츠를 다시 채울 수 있습니다.
$(element).tooltip("destroy");
$(element).tooltip({
title: message
});
답을 찾을 수 없었습니다. 해결 방법은 다음과 같습니다.
$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
BS4(및 사소한 변경 사항이 있는 BS3)의 경우, 몇 시간 동안 검색과 시험을 거친 후 이 문제에 대한 가장 신뢰할 수 있는 해결책을 생각해 냈고 동시에 둘 이상(툴팁 또는 팝업)을 여는 문제, 초점을 잃은 후 자동으로 열리는 문제 등도 해결했습니다.
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
}).on('shown.bs.tooltip', function() {
var link = $(this);
var data = '';
data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
data += ' <li>Sherif Salah</li>';
data += ' <li>Muhammad Salah</li>';
data += ' <li>and a gazillion more...</li>';
data += '</ul>';
link.attr('data-original-title', data);
setTimeout(function() {
if (link.is(':hover')) {
link.tooltip("dispose").tooltip("show");
}
}, 1000);
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="card">
<div class="card-body text-center">
<a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>.show()를 호출하지 않고 부트스트랩 4에서만 테스트했습니다.
el.tooltip('hide').attr('data-original-title', 'message');
클릭 시 부트스트랩 문서처럼 툴팁 내용/제목을 변경하고자 합니다.코드 예제를 복사할 때 눈치챘습니까?부트스트랩을 사용하고 있습니다.v5여기...
<span id="tooltip" class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top"
title="Tooltip content">Tooltip</span>
다음 단계로 이동하기 전에 Bootstrap5 툴팁을 활성화했는지 확인합니다.
$('#tooltip').click(function() {
$(this).attr('data-original-title', 'Content changed!').tooltip('show');
$(this).attr('data-original-title', 'Tooltip content');
});
이 범위 요소를 가리키면 도구 설명 내용이 표시됩니다.클릭하면 콘텐츠가 변경됨!으로 변경되고 기본 제목 Tooltip 콘텐츠로 돌아갑니다.
Mehmet Duran의 말이 거의 맞다고 생각하지만, 툴팁과 배치가 동일한 여러 클래스를 사용할 때 약간의 문제가 있었습니다.다음 코드는 또한 "tooltip_class"라는 클래스가 있는지 확인하는 js 오류를 방지합니다.이게 도움이 되길 바랍니다.
if (jQuery(".tooltip_class")[0]){
jQuery('.tooltip_class')
.attr('title', 'New Title.')
.attr('data-placement', 'right')
.tooltip('fixTitle')
.tooltip('hide');
}
요소의 텍스트를 직접 변경하여 텍스트를 변경합니다.(툴 팁 위치는 업데이트하지 않음).
$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);
이전 도구 설명을 삭제한 다음 새 도구 설명을 만들어 표시하여 텍스트를 변경합니다. (이전 도구 설명은 페이드아웃되고 새 도구 설명은 페이드인됩니다.)
$element
.tooltip('destroy')
.tooltip({
// Repeat previous options.
title: newText,
})
.tooltip('show');
"저장" 메시지를 애니메이션화하기 위해 최상의 방법을 사용하고 있습니다(사용). 툴팁의 크기가 변경되지 않음) 및 요청이 완료되면 텍스트를 "완료"(추가 패딩)로 변경합니다.
$element.tooltip({
placement: 'left',
title: 'Saving...',
trigger: 'manual',
}).tooltip('show');
var parent = $element.parent();
var interval_id = setInterval(function(){
var text = $('.tooltip-inner', parent).html();
switch(text) {
case 'Saving. ': text = 'Saving.. '; break;
case 'Saving.. ': text = 'Saving...'; break;
case 'Saving...': text = 'Saving. '; break;
}
$('.tooltip-inner', parent).html(text);
}, 250);
send_request( function(){
// When the request is complete
clearInterval(interval_id);
$('.tooltip-inner', parent).html('Done. ');
setTimeout(function() {
$element.tooltip('hide');
}, 1500 /* Show "Done." for a bit */);
});
이것은 나에게 효과가 있었습니다: (부트스트랩 3.3.6; jquery=1.11.3)
<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>
<script>
$('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>
속성data-html="true"도구 설명 제목에 html을 사용할 수 있습니다.
Tooltip 개체 Boostrap 사용:
$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');
HTML에서 제목 속성을 설정한 경우 아이콘을 클릭하거나 $(this).attr('title', newValue) 버튼을 사용합니다.
이 코드를 사용하여 도구 팁의 제목 변경을 숨기고 Ajax 요청이 성공적으로 돌아오면 도구 팁을 다시 표시할 수 있습니다.
$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() { $(element).tooltip('show');}, 500);
나는 이 쉬운 방법을 사용하고 있습니다.
$(document).ready(function() {
$("#btn").prop('title', 'Click to copy your shorturl');
});
function myFunction(){
$(btn).tooltip('hide');
$(btn).attr('data-original-title', 'Test');
$(btn).tooltip('show');
});언급URL : https://stackoverflow.com/questions/9501921/change-twitter-bootstrap-tooltip-content-on-click
'programing' 카테고리의 다른 글
| Android Studio Run/Debug 구성 오류: 모듈이 지정되지 않았습니다. (0) | 2023.08.20 |
|---|---|
| Spring Boot/Junit, 다중 프로파일에 대한 모든 장치 테스트 실행 (0) | 2023.08.20 |
| 전화 = N'1234'를 사용한 쿼리가 전화 = '1234'보다 느린 이유는 무엇입니까? (0) | 2023.08.20 |
| 비주얼 스튜디오 2013.컴퓨터의 IIS 웹 사이트에 액세스할 수 있는 권한이 없습니다. (0) | 2023.08.20 |
| NuGet: Install.ps1 파일로 파일의 속성을 변경하려면 어떻게 해야 합니까? (0) | 2023.08.20 |