আমার একটি অ্যাঙ্কর এলিমেন্টে একটি টুলটিপ রয়েছে, এটি ক্লিক করে একটি এজেএক্স অনুরোধ প্রেরণ করে। এই উপাদানটির একটি টুলটিপ রয়েছে (টুইটার বুটস্ট্র্যাপ থেকে)। আমি চাই যখন এজেএক্স অনুরোধটি সফলভাবে ফিরে আসবে তখন টুলটিপ সামগ্রীটি পরিবর্তিত হয়। দীক্ষার পরে কীভাবে আমি সরঞ্জামদণ্ডটি চালিত করতে পারি?
উত্তর:
উত্স কোড পড়ার সময় সবেমাত্র এটি আজ খুঁজে পাওয়া গেল। সুতরাং ক্লাসের $.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');$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
$(element).attr('data-original-title', newValue).tooltip('show');আমার জন্য সবচেয়ে সহজ কাজ সমাধান ছিল।
বুটস্ট্র্যাপ 3-এ এটি ইতিমধ্যে সরঞ্জামটিপ ডিসপ্লেতে পরিবর্তনগুলির ট্রিগার পরিবর্তন elt.attr('data-original-title', "Foo")হিসাবে "data-original-title"বৈশিষ্ট্যযুক্ত পরিবর্তন হিসাবে কল করা যথেষ্ট ।
আপডেট: আপনি পরিবর্তনগুলি তত্ক্ষণাত্ প্রদর্শন করতে .toltip ('show') যুক্ত করতে পারেন, শিরোনামে পরিবর্তনটি দেখার জন্য আপনাকে মাউসআউট এবং মাউসওভার লক্ষ্যমাত্রার প্রয়োজন হবে না
elt.attr('data-original-title', "Foo").tooltip('show');.tooltip('show');আপডেটের পরে এটি প্রদর্শন করতে এটি যোগ করতে পারেন
আপনি আসলে শো / লুকান কল না করেই সরঞ্জামটিপ পাঠ্য আপডেট করতে পারেন:
$(myEl)
.attr('title', newTitle)
.tooltip('fixTitle')
.tooltip('setContent').tooltip('show')চেইন শেষে, আমার জন্য কাজ।
setContentএবং showকৌশলটি! আপনি data-original-titleব্যবহারের পরিবর্তে সরাসরি পরিবর্তন করতে পারেনfixTitle
আপনি যদি সরঞ্জামটিটিপটি বন্ধ না করে এবং পুনরায় না খোলা করে পাঠ্য পরিবর্তন করতে চান তবে একটি দুর্দান্ত সমাধান এখানে।
$(element).attr('title', newTitle)
.tooltip('fixTitle')
.data('bs.tooltip')
.$tip.find('.tooltip-inner')
.text(newTitle)এইভাবে, টেক্সটটি সরঞ্জামটিপ বন্ধ না করে প্রতিস্থাপন করা হয়েছে (পুনরুদ্ধার করা যায় না, তবে আপনি যদি একটি শব্দ পরিবর্তন করে থাকেন তবে এটি ঠিক আছে)। এবং আপনি যখন টুলটিপে + ফিরে ফিরে যান, এটি এখনও আপডেট করা হয়।
** এটি বুটস্ট্র্যাপ 3, 2 এর জন্য আপনাকে সম্ভবত ডেটা / শ্রেণির নাম পরিবর্তন করতে হবে
$tipএর একটি বৈশিষ্ট্য নয়$(element)
$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
যদি টুলটিপটি তাত্ক্ষণিকভাবে চালু করা হয় (সম্ভবত জাভাস্ক্রিপ্ট সহ):
$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
বুটস্ট্র্যাপ 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');ইউএক্স পাশ থেকে আপনি কেবল দেখতে পাচ্ছেন যে কোনও বিবর্ণ বা লুকানো / প্রদর্শন প্রভাব ছাড়াই পাঠ্যটি পরিবর্তিত হয়েছে এবং এর কোনও প্রয়োজন নেই _fixTitle।
আপনি কেবল data-original-titleনিম্নলিখিত কোডটি ব্যবহার করে পরিবর্তন করতে পারেন :
$(element).attr('data-original-title', newValue);$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose
$('#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>নিম্নলিখিতটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে, মূলত আমি যে কোনও বিদ্যমান সরঞ্জামদণ্ডটি স্ক্র্যাপ করছি এবং নতুন টুলটিপটি দেখানোর জন্য বিরক্ত করছি না। কলটি যদি অন্য উত্তরের মতো এই সরঞ্জামদণ্ডে শো হয় তবে কার্সার উপরে না থাকলেও এটি পপ আপ হয়।
এই সমাধানটির জন্য আমি যে কারণে চলেছি তা হ'ল অন্যান্য সমাধানগুলি, বিদ্যমান সরঞ্জামদণ্ডটিকে পুনরায় ব্যবহার করার ফলে টুলটিপটি কিছু অদ্ভুত সমস্যাগুলির দিকে নিয়ে যায় যখন উপাদানটির উপরে কার্সারটিকে ঘুরিয়ে দেওয়ার সময় কখনও কখনও প্রদর্শিত হয় না।
function updateTooltip(element, tooltip) {
if (element.data('tooltip') != null) {
element.tooltip('hide');
element.removeData('tooltip');
}
element.tooltip({
title: tooltip
});
}data('bs.tooltip')data('tooltip')
বুটস্ট্র্যাপ 4 এ আমি কেবল $(el).tooltip('dispose');তখনই স্বাভাবিক হিসাবে পুনরায় তৈরি করি । সুতরাং আপনি কোনও ফাংশনের আগে ডিপোজালটি রাখতে পারেন যা একটি দ্বিগুণ হবে না তা নিশ্চিত হওয়ার জন্য একটি টুলটিপ তৈরি করে।
রাষ্ট্র এবং মানগুলির সাথে টিঙ্কার পরীক্ষা করা কম বন্ধুত্বপূর্ণ বলে মনে হয়।
আপনি কোনও ফাংশন দিয়ে টুলটিপ কলটিতে সামগ্রী সেট করতে পারেন
$("#myelement").tooltip({
"title": function() {
return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
}
});আপনাকে কেবলমাত্র উপাদানটির শিরোনাম ব্যবহার করতে হবে না।
আমি মনে করি মেহমেট দুরান প্রায় সঠিক, তবে একই সরঞ্জামদণ্ড এবং তাদের স্থাপনার সাথে একাধিক ক্লাস ব্যবহার করার সময় কিছু সমস্যা হয়েছিল were নীচের কোডটি "টুলটিপ_ক্লাস" নামে কোনও শ্রেণি আছে কিনা তা পরীক্ষা করে জেএস ত্রুটিগুলি এড়িয়ে চলে। আশাকরি এটা সাহায্য করবে.
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 */);
});এটি আমার জন্য কাজ করেছে: (বুটস্ট্র্যাপ ৩.৩..6; জ্যাকুয়ারি = 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"টুলটিপ শিরোনামে এইচটিএমএল ব্যবহার করতে দেয়।
বিএস 4 এর জন্য (এবং বিএস 3 সামান্য পরিবর্তন সহ) .. কয়েক ঘন্টা অনুসন্ধান এবং পরীক্ষার পরে, আমি এই সমস্যার সবচেয়ে নির্ভরযোগ্য সমাধান নিয়ে এসেছি এবং এটি একই সাথে একাধিক (টুলটিপ বা পপওভার) খোলার সমস্যাটিও সমাধান করে, এবং ফোকাস হারানোর পরে স্বয়ংক্রিয়ভাবে খোলার সমস্যা ইত্যাদি
$('[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>যখন আপনি আজাক্স অনুরোধটি সফলভাবে ফিরে আসবে তখন আপনি সরঞ্জাম টিপটি এর শিরোনাম পরিবর্তন করে এবং আবার সরঞ্জামটিটি প্রদর্শন করতে এই কোডটি ব্যবহার করতে পারেন।
$(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');
});