क्लिक पर ट्विटर बूटस्ट्रैप टूलटिप सामग्री बदलें

Question

मेरे पास एक एंकर तत्व पर टूलटिप है, जो क्लिक पर AJAX अनुरोध भेजता है। इस तत्व में एक टूलटिप (ट्विटर बूटस्ट्रैप से) है। मैं चाहता हूँ कि टूलटिप सामग्री तब बदले जब AJAX अनुरोध सफलतापूर्वक वापस आए। मैं दीक्षा के बाद टूलटिप में हेरफेर कैसे कर सकता हूं?

Answer 1

स्रोत कोड पढ़ने के दौरान ही आज यह पाया गया। इसलिए कक्षा के $.tooltip(string)भीतर किसी भी फ़ंक्शन को कॉल करता है Tooltip। और यदि आप देखते हैं Tooltip.fixTitle, तो यह data-original-titleविशेषता प्राप्त करता है और इसके साथ शीर्षक मान को प्रतिस्थापित करता है।

तो हम बस करते हैं:

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

और निश्चित रूप से पर्याप्त है, यह शीर्षक को अपडेट करता है, जो टूलटिप के अंदर का मूल्य है।

दूसरा तरीका (नीचे देखें @lukmdo टिप्पणी):

$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');

Comments

धन्यवाद! यह एक घंटे के लिए चकरा दिया गया था।

— टहनी

या उससे भी कम (चिकना)$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');

— lukmdo

आप डेटा ('टूलटिप') के माध्यम से शीर्षक भी बदल सकते हैं। विकल्प संपत्ति, देखें stackoverflow.com/questions/10181847/…

— जेम्स मैकमोहन

'FixTitle' पर दस्तावेज़ीकरण नहीं मिला, इसलिए मुझे लगता है कि यह उपयोग करने के लिए एक अच्छा विचार नहीं है !? ...

— user2846569

यह वास्तव में मेरे लिए काम नहीं करता था, टूलटिप ने मूल्यों को बदल दिया और फिर जल्दी से गायब हो गया। $(element).attr('data-original-title', newValue).tooltip('show');मेरे लिए सबसे आसान काम था।

— गाबे ओ'लेरी

Answer 2

बूटस्ट्रैप 3 में यह टूलटिप डिस्प्ले में पहले से ही बदलाव को ट्रिगर करने elt.attr('data-original-title', "Foo")वाले "data-original-title"विशेषता के परिवर्तन के रूप में कॉल करने के लिए पर्याप्त है ।

अद्यतन: आप तुरंत बदलाव दिखाने के लिए .tooltip ('शो') जोड़ सकते हैं, आपको शीर्षक में परिवर्तन देखने के लिए माउसआउट और माउसओवर लक्ष्य की आवश्यकता नहीं है

elt.attr('data-original-title', "Foo").tooltip('show');

Comments

स्वच्छ उत्तर, क्यों नहीं अप: <

— ays0110

यह तुरंत परिवर्तन लागू नहीं करता है, आपको नए शीर्षक पाठ को देखने के लिए

— माउसआउट

यह वास्तव में सबसे अच्छा जवाब है और आप .tooltip('show');इसे अपडेट के बाद दिखाने के लिए जोड़ सकते हैं

— जेरेड

यह एकमात्र समाधान है (कई कोशिशों में से) जो सिर्फ काम करने के लिए लगता था (bs3)। सुनिश्चित करने के लिए अच्छा समाधान!

— ज्योसफ

यह समाधान अन्य सभी की तुलना में बेहतर है

— अयाज ज़फर

Answer 3

आप टूलटिप पाठ को वास्तव में शो / छिपाने के बिना अपडेट कर सकते हैं:

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')

Comments

यह, .tooltip('show')श्रृंखला के अंत के साथ , मेरे लिए काम किया।

— मार्कौ

हाँ, setContentऔर showचाल है! आप data-original-titleका उपयोग करने के बजाय सीधे बदल सकते हैंfixTitle

— brauliobo

बूटस्ट्रैप पर परीक्षण किया v2.3.1

— रिकार्डो

Answer 4

उपकरण बंद करने और फिर से खोलने के बिना पाठ को बदलना चाहते हैं तो एक अच्छा समाधान है।

$(element).attr('title', newTitle)
          .tooltip('fixTitle')
          .data('bs.tooltip')
          .$tip.find('.tooltip-inner')
          .text(newTitle)

इस तरह, टेक्स्ट को टूलटिप को बंद किए बिना रिप्लेस किया गया है (लेकिन यदि आप एक शब्द में बदलाव कर रहे हैं आदि तो यह ठीक होना चाहिए)। और जब आप टूलटिप पर वापस + बंद करते हैं, तब भी इसे अपडेट किया जाता है।

** यह बूटस्ट्रैप 3 है, 2 के लिए आपको शायद डेटा / क्लास के नाम बदलने होंगे

Comments

कहते हैं, $tipका एक गुण नहीं है$(element)

— Augustin Riedinger

ऐसा किया है:$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);

— Augustin Riedinger

जब मैं टेक्स्ट फ़ील्ड में टाइप कर रहा हूं, तो पड़ोसी टूल पर टूलटिप अपडेट कर रहा हूं, और जब मैं कोई कुंजी दबाता हूं तो टूलटिप इस कोड के साथ मेरे लिए गायब हो जाता है।

— कांप

इसके लिए धन्यवाद। इस समाधान के साथ एकमात्र समस्या यह है कि पाठ परिवर्तन के बाद टूलटिप की स्थिति गड़बड़ाने लगती है।

— वोज्शिएक ज़िलिंस्की

Answer 5

बूटस्ट्रैप 4 के लिए:

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");

Comments

यह अनिर्दिष्ट एपीआई का उपयोग करता है। खबरदार।

— क्लो

Answer 6

यह तब काम करता है जब टूलटिप को तत्काल (जावास्क्रिप्ट के साथ):

$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');

Comments

बूटस्ट्रैप 3 के साथ, यह बन जाता है$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';

— ajbeaven

हे संबंधपरक, क्या आप टिप्पणियों के सुधार को प्रतिबिंबित करने के लिए अपना जवाब बदल सकते हैं? धन्यवाद।

— तूएलि

Answer 7

बूटस्ट्रैप 3.x के लिए

यह सबसे साफ समाधान की तरह लगता है:

$(element)
  .attr('data-original-title', 'New title').tooltip('show')

शो का उपयोग शीर्षक अपडेट को तुरंत करने के लिए किया जाता है, न कि टूलटिप के छिपे होने और फिर से दिखाए जाने का इंतजार करने के लिए।

Answer 8

यहाँ बूटस्ट्रैप 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।

Answer 9

आप केवल data-original-titleनिम्नलिखित कोड का उपयोग करके बदल सकते हैं :

$(element).attr('data-original-title', newValue);

Answer 10

बूटस्ट्रैप ४

$('#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>

Answer 11

निम्नलिखित ने मेरे लिए सबसे अच्छा काम किया, मूल रूप से मैं किसी भी मौजूदा टूलटिप को स्क्रैप कर रहा हूं और नए टूलटिप को दिखाने के लिए परेशान नहीं हूं। अगर टूलटिप पर कॉलिंग शो अन्य उत्तरों की तरह होता है, तो यह तब भी पॉप अप होता है, जब कर्सर इसके ऊपर मंडराता न हो।

मैं इस समाधान के लिए गया कारण यह है कि अन्य समाधान, मौजूदा टूलटिप का फिर से उपयोग करते हुए, टूलटिप के साथ कुछ अजीब मुद्दों का कारण बनता है, कभी-कभी तत्व के ऊपर कर्सर मँडराते समय नहीं दिखाया जाता है।

function updateTooltip(element, tooltip) {
    if (element.data('tooltip') != null) {
        element.tooltip('hide');
        element.removeData('tooltip');
    }
    element.tooltip({
        title: tooltip
    });
}

Comments

इसके लिए सबसे अच्छा जवाब। प्रश्न।

— डैनियल मिल्स्की

@ DanielMilidsski धन्यवाद :)

— aknuds1

अगर आप बूस्टर data('bs.tooltip')data('tooltip')

— एंजेल

Answer 12

बूटस्ट्रैप 4 में मैं अभी $(el).tooltip('dispose');सामान्य के रूप में फिर से उपयोग करता हूं । तो आप एक फ़ंक्शन के सामने डिस्पोज़ रख सकते हैं जो टूलटिप बनाता है यह सुनिश्चित करने के लिए कि यह दोगुना नहीं है।

मानों के साथ राज्य और टिंकर की जांच करना कम अनुकूल लगता है।

Comments

क्या हमें टूलटिप शीर्षक को अपडेट करने से पहले या बाद में $ (el) .tooltip ('dispose') को कॉल करना चाहिए?

— फिफी

@imabot पुराने टूलटिप का निपटान करता है, फिर नए डेटा के साथ फिर से बनाता है। यदि आपके टूलटिप्स जटिल हैं, तो आप प्रारंभिक कॉन्फ़िगरेशन को पुनः प्राप्त या अन्यथा संग्रहित करना चाह सकते हैं ताकि आप बस उस कॉन्फ़िगरेशन + नए मूल्यों के साथ फिर से बना सकें। आशा है कि समझ में आता है।

— मार्टिन लिन

Answer 13

आप एक फ़ंक्शन के साथ टूलटिप कॉल पर सामग्री सेट कर सकते हैं

        $("#myelement").tooltip({
            "title": function() {
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            }
        });

आपको केवल तथाकथित तत्व के शीर्षक का उपयोग करने की आवश्यकता नहीं है।

Answer 14

धन्यवाद यह कोड मेरे लिए बहुत उपयोगी था, मैंने इसे अपनी परियोजनाओं पर प्रभावी पाया

$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');

Answer 15

किसी भी पहले से मौजूद टूलटिप को नष्ट कर दें ताकि हम नए टूलटिप सामग्री के साथ फिर से जुड़ सकें

$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});

Answer 16

मुझे काम करने का कोई जवाब नहीं मिला, यहाँ एक समाधान है:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);

Answer 17

मुझे लगता है कि मेहमत दुरान लगभग सही हैं, लेकिन एक ही टूलटिप और उनके प्लेसमेंट के साथ कई वर्गों का उपयोग करते समय कुछ समस्याएं थीं। निम्न कोड भी js त्रुटियों की जाँच से बचता है अगर "टूलटिप_क्लास" नामक कोई वर्ग है। उम्मीद है की यह मदद करेगा।

if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }

Answer 18

सीधे तत्व में पाठ को बदलकर पाठ बदलें। (टूलटिप स्थिति को अद्यतन नहीं करता है)।

$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);

पुराने टूलटिप को नष्ट करके पाठ को बदलें, फिर एक नया निर्माण और दिखा रहा है। (पुराने को फीका करने के लिए और नए को फीका करने का कारण बनता है)

$element
.tooltip('destroy')
.tooltip({
    // Repeat previous options.
    title: newText,
})
.tooltip('show');

मैं "बचत" को चेतन करने के लिए शीर्ष विधि का उपयोग कर रहा हूं। संदेश ( &nbspटूलटिप का उपयोग आकार में नहीं बदलता है) और पाठ को "पूर्ण" करने के लिए परिवर्तित करना। (प्लस पैडिंग) जब अनुरोध पूरा हो जाता है।

$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 */);
});

Answer 19

इसने मेरे लिए काम किया: (बूटस्ट्रैप 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 का उपयोग करने की अनुमति देती है।

Answer 20

टूलटिप ऑब्जेक्ट बूस्ट्रैप के साथ:

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');

Answer 21

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>

Answer 22

मैंने इसे केवल बूटस्ट्रैप 4 & w / o कॉलिंग .show () में जांचा

el.tooltip('hide').attr('data-original-title', 'message');

Answer 23

आप इस कोड का उपयोग टूल टिप को छिपाने के लिए अपना शीर्षक बदल सकते हैं और टूलटिप को फिर से दिखा सकते हैं, जब अजाक्स अनुरोध सफलतापूर्वक लौटता है।

$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() {  $(element).tooltip('show');}, 500);

Answer 24

मैं इस आसान तरीके का उपयोग कर रहा हूं:

$(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');
});

Answer 25

$(this).attr('data-original-title', 'click here to publish')
       .tooltip('fixTitle')
       .tooltip('show');

उपयोगी होने के बाद यदि आपको टूलटिप के पाठ को बदलने की आवश्यकता है, तो उसे 'डेटा-मूल-शीर्षक' के साथ आरंभीकृत किया गया है।