AngularJS के साथ बूटस्ट्रैप टूलटिप का उपयोग करना


90

मैं मेरा एक ऐप में बूटस्ट्रैप टूलटिप का उपयोग करने की कोशिश कर रहा हूं। मेरा ऐप AngularJS वर्तमान में उपयोग कर रहा है, मेरे पास निम्नलिखित हैं:

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

मुझे लगता है कि मुझे उपयोग करने की आवश्यकता है

$("[data-toggle=tooltip]").tooltip();

हालांकि, मुझे यकीन नहीं है। हालांकि जब मैं ऊपर की लाइन जोड़ता हूं, तब भी मेरा कोड काम नहीं करता है। मैं UI बूटस्ट्रैप का उपयोग करने से बचने की कोशिश कर रहा हूं क्योंकि इसमें मेरी आवश्यकता से अधिक है। हालाँकि, अगर मुझे सिर्फ टूलटिप का टुकड़ा शामिल करना था, तो मैं उसके लिए खुला रहूँगा। फिर भी, मैं यह पता नहीं लगा सकता कि ऐसा कैसे किया जाए।

क्या कोई मुझे दिखा सकता है कि AngularJS के साथ बूटस्ट्रैप टूलटिप कैसे काम कर सकता है?


4
कोणीय-यूआई बूटस्ट्रैप का उपयोग किए बिना, आपको अपने ईवेंट के लिए सभी बाइंडिंग करने की आवश्यकता होगी। : यदि आप, यूआई बूटस्ट्रैप उपयोग करने के लिए है, क्योंकि यह एक से अधिक आप की जरूरत है नहीं करना चाहते हैं तो आप केवल भागों लोड हो रहा है कि आप की जरूरत करना माना जाता है github.com/angular-ui/bootstrap/tree/master/src/popover
TheSharpieOne

जवाबों:


151

टूलटिप्स को पहले स्थान पर काम करने के लिए, आपको उन्हें अपने कोड में इनिशियलाइज़ करना होगा। एक दूसरे के लिए AngularJS को अनदेखा करना, यह है कि आप jQuery में काम करने के लिए टूलटिप्स प्राप्त करेंगे:

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

यह एक AngularJS ऐप में भी काम करेगा जब तक कि यह Angular द्वारा रचित सामग्री न हो (उदाहरण: ng-repeat)। उस मामले में, आपको इसे संभालने के लिए एक निर्देश लिखने की आवश्यकता है। यहाँ एक सरल निर्देश है कि मेरे लिए काम किया है:

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

फिर आपको बस इतना करना है कि आप जिस टूलटिप को दिखाना चाहते हैं उस तत्व पर "टूलटिप" विशेषता को शामिल करें:

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>

उम्मीद है की वो मदद करदे!


अच्छा समाधान! मैंने angular.module ('टूलटिप', []) के साथ app.directive को बदल दिया। इसे अपने एप्लिकेशन में काम करने के लिए निर्देश दें।
बीनवाह ah

अच्छा समाधान है। क्या टूलटिप को बदलने के लिए हम उस पर कुछ सीएसएस जोड़ सकते हैं?

1
$(element).tooltip({html: 'true', container: 'body'})अनुकूलित विकल्प प्रदान करने पर एक उदाहरण के रूप में टूलटिप शो को कॉल करने से पहले जोड़ सकते हैं ।
वाजेक हर्मेज़ ज़ूल

1
element.tooltip()jQuery के बजाय इस्तेमाल किया जा सकता है।
ब्रायन

1
क्या एक सुंदर जवाब
नौटंकी

58

सबसे अच्छा समाधान जो मैं करने में सक्षम हूं, वह इस तरह से आपके तत्व पर "ऑनमॉज़ेंटर" विशेषता को शामिल करना है:

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>

1
Boostrap JS एक jQuery लाइब्रेरी है। कम से कम यह बूटस्ट्रैप 3 में था
gabeodess

1
कोणीय 2+ के साथ भी काम करता है। धन्यवाद!
गीतम टी।

32

सरल उत्तर - UI बूटस्ट्रैप ( ui.bootstrap.tooltip ) का उपयोग करना

इस प्रश्न का बहुत ही जटिल उत्तर दिया गया है। यहाँ मेरे लिए क्या काम किया है।

  1. UI बूटस्ट्रैप स्थापित करें -$ bower install angular-bootstrap

  2. यूआई बूटस्ट्रैप को एक निर्भरता के रूप में इंजेक्ट करें - angular.module('myModule', ['ui.bootstrap']);

  3. अपने html में uib-tooltip निर्देश का उपयोग करें ।


<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>

2
शुद्ध कोणीय और यूआई-बूटस्ट्रैप का उपयोग करके कोई jQuery नहीं; यह, धन्यवाद मैं के लिए क्या देख रहा था है
Rsh

एकमात्र समाधान जो मेरे लिए काम करता है। धन्यवाद! (@ कोंडल - हाँ, यह jQuery के बिना काम करता है)।
निक ग्रीली

28

यदि आप एक कोणीय ऐप बना रहे हैं, तो आप jQuery का उपयोग कर सकते हैं, लेकिन अधिक कोणीय संचालित प्रतिमानों के पक्ष में इसे टालने के लिए कई अच्छे कारण हैं। आप बूटस्ट्रैप द्वारा प्रदान की गई शैलियों का उपयोग करना जारी रख सकते हैं, लेकिन UI बूटस्ट्रैप का उपयोग करके देशी कोणीय के साथ jQuery प्लगइन्स को बदल सकते हैं

Boostrap CSS फाइलें, Angular.js और ui.Bootstrap.js शामिल करें:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

सुनिश्चित करें कि ui.bootstrapजब आप इस तरह से अपना मॉड्यूल बनाते हैं तो आप इंजेक्शन लगाते हैं:

var app = angular.module('plunker', ['ui.bootstrap']);

तब आप jQuery द्वारा उठाए गए डेटा विशेषताओं के बजाय कोणीय निर्देशों का उपयोग कर सकते हैं:

<button type="button" class="btn btn-default" 
        title="Tooltip on left" data-toggle="tooltip" data-placement="left"
        tooltip="Tooltip on left" tooltip-placement="left" >
  Tooltip on left
</button>

प्लंकर में डेमो


UI बूटस्ट्रैप से बचना

jQuery.min.js (94kb) + Bootstrap.min.js (32kb) भी आपको ज़रूरत से ज़्यादा दे रहा है, और ui-bootstrap.min.js (41kb) से बहुत अधिक है ।

और मॉड्यूल डाउनलोड करने में लगने वाला समय प्रदर्शन का केवल एक पहलू है।

यदि आप वास्तव में केवल आवश्यक मॉड्यूल लोड करना चाहते हैं, तो आप "बिल्ड बनाएँ" और बूटस्ट्रैप-यूआई वेबसाइट से टूलटिप्स चुन सकते हैं । या आप टूलटिप्स के लिए स्रोत कोड का पता लगा सकते हैं और आपको जो चाहिए वह चुन सकते हैं।

यहाँ केवल टूलटिप्स और टेम्प्लेट के साथ एक छोटा कस्टम निर्माण (6kb)


वर्थ नोटिंग, लेखन के रूप में, v 0.12.1 कोणीय के v1.2 के लिए है। 0.13 शाखा कोणीय 1.3+ के लिए होगी, लेकिन नया अनुचर अभी भी इस पर काम कर रहा है (और एक बड़ा काम कर रहा है!)
निक

11

क्या आपने बूटस्ट्रैप JS और jQuery को शामिल किया है?

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

यदि आप पहले से ही लोड नहीं करते हैं, तो Angular UI ( http://angular-ui.github.io/bootstrap/ ) अधिक ओवरहेड नहीं हो सकता है। मैं अपने कोणीय ऐप के साथ इसका उपयोग करता हूं, और इसमें टूलटिप निर्देश है। प्रयोग करके देखेंtooltip="tiptext"

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left"
        tooltip="This is a Bootstrap tooltip"
        tooltip-placement="left" >
            Tooltip on left
</button>

धन्यवाद @prototype! मैं @gabeodess उत्तर के लिए जा रहा था, लेकिन इस समाधान को प्राथमिकता दें क्योंकि यह स्पष्ट रूप से यह नहीं कहता है कि इसे jQuery की आवश्यकता है, जो इसे थोड़ा कम युग्मित करता है, और भविष्य में पूरी तरह से कोणीय समाधान के लिए बदलना आसान है।
Hatsrumandcode

8

मैंने एक साधारण कोणीय निर्देश लिखा जो हमारे लिए अच्छा काम कर रहा है।

यहाँ एक डेमो है: http://jsbin.com/tesido/edit?html,js,output

निर्देश (बूटस्ट्रैप 3 के लिए) :

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

नोट: यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं, लाइनों 6 और 11 यदि आप उपरोक्त पर बदलने की आवश्यकता होगी तो tooltip('destroy')साथ tooltip('dispose')करने के लिए (धन्यवाद इस upadate के लिए user1191559 )

बस bootstrap-tooltipएक तत्व के साथ एक विशेषता के रूप में जोड़ें a title। कोणीय परिवर्तन की निगरानी करेगाtitle लेकिन अन्यथा बूटस्ट्रैप से निपटने के लिए टूलटिप को पास करें।

यह आपको मूल बूटस्ट्रैप टूलटिप विकल्पों में से किसी को भी data-सामान्य बूटस्ट्रैप तरीके में उपयोग करने की अनुमति देता है ।

मार्कअप :

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

स्पष्ट रूप से यह सभी विस्तृत बाइंडिंग और उन्नत एकीकरण नहीं है जो AngularStrap और UI बूटस्ट्रैप ऑफ़र करता है, लेकिन यदि आप पहले से ही अपने Angular ऐप में बूटस्ट्रैप के JS का उपयोग कर रहे हैं तो यह एक अच्छा समाधान है और आपको अपने संपूर्ण ऐप के बिना एक मूल टूलटिप की आवश्यकता है नियंत्रकों को संशोधित करना या माउस घटनाओं को प्रबंधित करना।


1
इसका उपयोग करने की कोशिश की और मुझे एक Error: cannot call methods on tooltip prior to initialization; attempted to call method 'destroy'त्रुटि मिली ।
क्रिस

@CD हम्म ... मैं अभी तक उस त्रुटि को पुन: पेश करने में सक्षम नहीं हूं। मैंने इस डेमो url को उत्तर में जोड़ दिया: jsbin.com/tesido/edit?html,js,output यदि आप जानते हैं कि आपका कोड कैसे अलग है, तो मुझे बताएं और मैं देखूंगा कि क्या मैं मदद कर सकता हूं। वैसे, डेमो Angular v1.2, बूटस्ट्रैप v3.3, jQuery v2.1
brandonjp

1
धन्यवाद, इन नमूनों में केवल यही एक था जो टूलटिप को गतिशील रूप से अद्यतन करता है यदि शीर्षक बाध्यकारी के माध्यम से बदलता है।
dalcam

1
BS4 के लिए BTW, आप लाइन स्वैप करना होगा: element.tooltip('destroy'); के साथ element.tooltip('dispose');दोनों स्थानों में।
dalcam 6

4

आप गतिशील एकल पृष्ठ अनुप्रयोगों के लिए selector विकल्प का उपयोग कर सकते हैं :

jQuery(function($) {
    $(document).tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

यदि एक चयनकर्ता प्रदान किया जाता है, तो टूलटिप ऑब्जेक्ट को निर्दिष्ट लक्ष्यों को सौंप दिया जाएगा। व्यवहार में, इसका उपयोग डायनेमिक HTML सामग्री को टूलटिप्स जोड़े जाने के लिए सक्षम करने के लिए किया जाता है।


4

आप इस तरह एक साधारण निर्देश बना सकते हैं:

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

फिर, अपना कस्टम निर्देश जोड़ें जहां आवश्यक है:

<button my-tooltip></button>

3

आप के साथ ऐसा कर सकते हैं AngularStrap जो

देशी निर्देशों का एक सेट है जो आपके AngularJS 1.2+ ऐप में बूटस्ट्रैप 3.0+ के सहज एकीकरण को सक्षम करता है। "

आप इस तरह से पूरी लाइब्रेरी को इंजेक्ट कर सकते हैं:

var app = angular.module('MyApp', ['mgcrea.ngStrap']); 

या केवल टूलटिप सुविधा में इस तरह से खींचो:

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']); 

स्टैक स्निपेट्स में डेमो

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>


2

सबसे आसान तरीका है, $("[data-toggle=tooltip]").tooltip();संबंधित नियंत्रक से जोड़ें ।


1

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>


3
कृपया अपने उत्तर में कुछ अन्वेषण जोड़ें।
आंद्रे कूल

1

कृपया एक बात याद रखें कि यदि आप angularjs में बूटस्ट्रैप टूलटिप का उपयोग करना चाहते हैं, तो यह आपकी स्क्रिप्ट का क्रम है यदि आप jquery-ui का उपयोग कर रहे हैं, तो यह होना चाहिए:

  • jQuery
  • jQuery यूआई
  • Bootstap

इसे आजमाया और परखा जाता है


1

यदि आप टूलटिप्स को गतिशील रूप से असाइन कर रहे हैं तो केवल इसे पढ़ें

अर्थात <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

मेरे पास डायनेमिक टूलटिप्स के साथ एक समस्या थी जो हमेशा दृश्य के साथ अपडेट नहीं हो रही थी। उदाहरण के लिए, मैं कुछ इस तरह कर रहा था:

यह लगातार काम नहीं किया

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div> 

और इसे सक्रिय करना:

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

हालाँकि, जब मेरे लोग सरणी बदलेंगे, तो मेरे टूलटिप्स हमेशा अपडेट नहीं होंगे। मैंने इस धागे और दूसरों को बिना किसी भाग्य के हर तय करने की कोशिश की। ऐसा लग रहा था कि गड़बड़ केवल 5% समय के आसपास हो रही थी, और इसे दोहराना लगभग असंभव था।

दुर्भाग्य से, ये टूलटिप्स मेरी परियोजना के लिए महत्वपूर्ण हैं, और गलत टूलटिप दिखाना बहुत बुरा हो सकता है।

क्या मुद्दा लग रहा था

बूटस्ट्रैप titleएक नई विशेषता के लिए संपत्ति के मूल्य की प्रतिलिपि बना रहा था , data-original-titleऔर titleजब मैं टोलटिप्स को सक्रिय करूंगा तो संपत्ति (कभी-कभी) को हटा देगा। हालाँकि, जब मेरा title={{ person.tooltip }}नया मूल्य बदलेगा तो हमेशा संपत्ति में अपडेट नहीं किया जाएगा data-original-title। मैंने टूलटिप्स को निष्क्रिय करने और उन्हें पुन: सक्रिय करने की कोशिश की, उन्हें नष्ट कर दिया, सीधे इस संपत्ति के लिए बाध्य किया ... सब कुछ। हालाँकि इनमें से प्रत्येक ने या तो काम नहीं किया या नए मुद्दे बनाए; जैसे कि titleऔरdata-original-title विशेषताओं को हटाया जा रहा है और मेरी वस्तु से संयुक्त राष्ट्र बाध्य नहीं है।

क्या काम किया?

शायद सबसे बदसूरत कोड मैंने कभी धक्का दिया है, लेकिन इसने मेरे लिए इस छोटी लेकिन पर्याप्त समस्या को हल कर दिया है। जब भी टूलटिप नए डेटा के साथ अपडेट होता है, मैं इस कोड को चलाता हूं:

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

सार में यहाँ क्या हो रहा है:

  • डाइजेस्ट चक्र को पूरा करने के लिए कुछ समय (1500 एमएस) प्रतीक्षा करें, और title अपडेट होने के लिए।
  • यदि कोई ऐसी titleसंपत्ति है जो खाली नहीं है (यानी वह बदल गई है), data-original-titleतो उसे संपत्ति में कॉपी करें ताकि वह बूटस्ट्रैप के टूलिप्स द्वारा उठाया जाएगा।
  • टूलटिप्स को पुन: सक्रिय करें

आशा है कि यह लंबा जवाब किसी ऐसे व्यक्ति की मदद करता है जो शायद संघर्ष कर रहा था जैसा कि मैं था।



1

टूलटिप्स को ताज़ा करने के लिए जब मॉडल बदलता है , तो मैं data-original-titleइसके बजाय बस का उपयोग करता हूंtitle

जैसे

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

ध्यान दें कि मैं इस तरह से टूलटिप्स का प्रारंभिक उपयोग कर रहा हूं:

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

संस्करणों:

  • AngularJS 1.4.10
  • बूटस्ट्रैप 3.1.1
  • jquery: 1.11.0

0

AngularStrap IE8 में angularjs संस्करण 1.2.9 के साथ काम नहीं करता है, इसलिए यदि आपके आवेदन को IE8 का समर्थन करने की आवश्यकता है तो इसका उपयोग न करें


0

impproving @aStewartDesign जवाब:

.directive('tooltip', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.hover(function(){
        element.tooltip('show');
      }, function(){
        element.tooltip('hide');
      });
    }
  };
});

Jquery के लिए कोई ज़रूरत नहीं है, इसका लेट एवेज़र है, लेकिन मुझे लगा कि जब से शीर्ष मतदान हुआ है, मुझे इस पर ध्यान देना चाहिए।


0

निर्भरता स्थापित करें:

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

अगला, अपने कोणीय-cli.json में स्क्रिप्ट जोड़ें

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

फिर, एक script.js बनाएँ

$("[data-toggle=tooltip]").tooltip();

अब अपने सर्वर को पुनः आरंभ करें।


गलत कोणीय संस्करण, मूल प्रश्न AngularJS not Angular
जोस लुइस बेरोकल

0

टूलटिप फ़ंक्शन के कारण, आपको angularJS को बताना होगा कि आप jQuery का उपयोग कर रहे हैं।

यह आपका निर्देश है:

myApp.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('mouseenter', function () {
                jQuery.noConflict();
                (function ($) {
                    $(element[0]).tooltip('show');
                })(jQuery);
            });
        }
    };
});

और यह निर्देश का उपयोग करने का तरीका है:


<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.