অ্যাঙ্গুলারজেএস সহ বুটস্ট্র্যাপ টুলটিপ ব্যবহার করা

Question 1

আমি আমার একটি অ্যাপ্লিকেশনে বুটস্ট্র্যাপ টুলটিপটি ব্যবহার করার চেষ্টা করছি। আমার অ্যাপটি বর্তমানে অ্যাঙ্গুলারজেএস ব্যবহার করছে, আমার কাছে নিম্নলিখিতগুলি রয়েছে:

<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();

তবে আমি নিশ্চিত নই। এমনকি আমি উপরে লাইনটি যুক্ত করার পরেও, আমার কোড কাজ করে না। আমি ইউআই বুটস্ট্র্যাপ ব্যবহার করা এড়াতে চেষ্টা করছি কারণ এটি আমার প্রয়োজনের চেয়ে বেশি রয়েছে। যাইহোক, যদি আমাকে কেবলমাত্র সরঞ্জামটিপ টুকরো অন্তর্ভুক্ত করতে হয় তবে আমি এটির জন্য খোলা থাকতাম। তবুও, আমি কীভাবে এটি করতে পারি তা বুঝতে পারি না।

কেউ আমাকে কীভাবে অ্যাঙ্গুলারজেএসের সাথে বুটস্ট্র্যাপ টুলটিপ কাজ করতে পারে তা দেখাতে পারেন?

Question 2

প্রথম স্থানে কাজ করার জন্য সরঞ্জামের সরঞ্জামগুলি পেতে, আপনাকে সেগুলি আপনার কোডে শুরু করতে হবে। এক সেকেন্ডের জন্য অ্যাঙ্গুলারজেএস উপেক্ষা করে আপনি এইভাবে jQuery এ কাজ করার সরঞ্জামদণ্ডগুলি পাবেন:

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

এটি এংুলার জেএস অ্যাপে এতক্ষণ কাজ করবে যেহেতু এটি কৌণিক দ্বারা রেন্ডার করা সামগ্রী নয় (যেমন: এনজি-রিপিট)। সেক্ষেত্রে আপনাকে এটি পরিচালনা করার জন্য একটি নির্দেশিকা লিখতে হবে। এখানে একটি সহজ নির্দেশ যা আমার পক্ষে কাজ করেছে:

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>

আশা করি এইটি কাজ করবে!

Question 3

আমি যে সর্বোত্তম সমাধানটি সামনে আসতে পেরেছি তা হ'ল আপনার উপাদানটির উপরে "অনউমসেন্টার" বৈশিষ্ট্যটি অন্তর্ভুক্ত করা:

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

Question 4

সরল উত্তর - ইউআই বুটস্ট্র্যাপ ব্যবহার করে ( ui.bootstrap.tooltip )

এই প্রশ্নের খুব জটিল উত্তর রয়েছে বলে মনে হচ্ছে। আমার জন্য কি কাজ করেছে তা এখানে।

ইউআই বুটস্ট্র্যাপ ইনস্টল করুন -$ bower install angular-bootstrap
নির্ভরতা হিসাবে ইউআই বুটস্ট্র্যাপ ইনজেক্ট করুন - angular.module('myModule', ['ui.bootstrap']);
আপনার এইচটিএমএলে ইউআইব-টুলটিপ নির্দেশিকা ব্যবহার করুন ।

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

Question 5

যদি আপনি একটি কৌণিক অ্যাপ তৈরি করে থাকেন তবে আপনি jQuery ব্যবহার করতে পারেন, তবে এটি আরও কৌণিক চালিত দৃষ্টান্তের পক্ষে এড়াতে চেষ্টা করার অনেকগুলি ভাল কারণ রয়েছে। আপনি বুটস্ট্র্যাপ দ্বারা প্রদত্ত শৈলীগুলি ব্যবহার অবিরত করতে পারেন, তবে ইউআই বুটস্ট্র্যাপ ব্যবহার করে জিকুয়ারি প্লাগইনগুলি স্থানীয় কৌণিকের সাথে প্রতিস্থাপন করতে পারেন

বুস্ট্র্যাপ সিএসএস ফাইল, অ্যাঙ্গুলার.জেএস এবং ইউআই বুটস্ট্র্যাপ.জেএস অন্তর্ভুক্ত করুন:

<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>

প্লামকারে ডেমো

ইউআই বুটস্ট্র্যাপ এড়ানো হচ্ছে

jQuery.min.js (94kb) + বুটস্ট্র্যাপ.মিন.জেএস (32 কেবি) আপনাকে আপনার প্রয়োজনের তুলনায় অনেক বেশি, এবং ইউআই-বুটস্ট্র্যাপ.মিন.জেএস (41 কেবি) এর থেকেও অনেক বেশি সরবরাহ করে ।

এবং মডিউলগুলি ডাউনলোড করতে ব্যয় করা সময় পারফরম্যান্সের এক দিক।

যদি আপনি সত্যিই কেবল আপনার প্রয়োজনীয় মডিউলগুলি লোড করতে চান, আপনি বুটস্ট্র্যাপ-ইউআই ওয়েবসাইট থেকে "একটি বিল্ড তৈরি করুন" এবং টুলটিপগুলি চয়ন করতে পারেন । অথবা আপনি সরঞ্জামদণ্ডগুলির জন্য উত্স কোডটি অন্বেষণ করতে পারেন এবং আপনার যা প্রয়োজন তা চয়ন করতে পারেন।

এখানে কেবলমাত্র সরঞ্জামটিপস এবং টেম্পলেট (6 কেবি) সহ একটি কাস্টম বিল্ড তৈরি করা হয়েছে

Question 6

আপনি কি বুটস্ট্র্যাপ জেএস এবং 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>

আপনি যদি ইতিমধ্যে সেগুলি লোড না করেন তবে কৌনিক 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>

Question 7

আমি একটি সাধারণ কৌণিক নির্দেশিকা লিখেছিলাম যা আমাদের পক্ষে ভালভাবে কাজ করছে।

এখানে একটি ডেমো: http://jsbin.com/tesido/edit?html,js , আউটপুট

নির্দেশিকা (বুটস্ট্র্যাপ 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একটির সাথে যে কোনও উপাদানকে একটি বৈশিষ্ট্য হিসাবে যুক্ত করুন title। কৌণিকটি পরিবর্তনের জন্য নিরীক্ষণ করবে titleতবে অন্যথায় বুটস্ট্র্যাপে টুলটিপ হ্যান্ডলিং করবে।

এটি আপনাকে সাধারণ বুটস্ট্র্যাপ উপায়ে বৈশিষ্ট্য হিসাবে নেটিভ বুটস্ট্র্যাপ টুলটিপ বিকল্পগুলির ব্যবহার করতে দেয় data-।

মার্কআপ :

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

স্পষ্টতই এর সমস্ত বিস্তৃত বাইন্ডিংগুলি এবং অ্যাঙ্গুলারস্ট্র্যাপ এবং ইউআই বুটস্ট্র্যাপ অফার করে এমন উন্নত সংহত নেই, তবে আপনি যদি ইতিমধ্যে আপনার কৌণিক অ্যাপে বুটস্ট্র্যাপের জেএস ব্যবহার করছেন এবং আপনার পুরো অ্যাপ্লিকেশন জুড়ে কেবল একটি প্রাথমিক টুলটিপ ব্রিজের প্রয়োজন হয় তবে এটি একটি ভাল সমাধান solution নিয়ন্ত্রণকারীদের পরিবর্তন করা বা মাউস ইভেন্টগুলি পরিচালনা করা।

Question 8

আপনি গতিশীল একক পৃষ্ঠা অ্যাপ্লিকেশনগুলির জন্য selector বিকল্পটি ব্যবহার করতে পারেন :

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

যদি কোনও নির্বাচক সরবরাহ করা হয়, তাহলে সরঞ্জামদ্বার অবজেক্টগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে। অনুশীলনে, এটি ব্যবহার করে গতিশীল এইচটিএমএল সামগ্রীটি টুলটিপস যুক্ত করতে সক্ষম করে।

Question 9

আপনি এর মতো একটি সাধারণ নির্দেশিকা তৈরি করতে পারেন:

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

তারপরে, আপনার কাস্টম নির্দেশটি যেখানে প্রয়োজন সেখানে যুক্ত করুন:

<button my-tooltip></button>

Question 10

আপনি AngularStrap যা দিয়ে এটি করতে পারেন

দেশীয় নির্দেশাবলীর একটি সেট যা আপনার অ্যাংুলারজেএস 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>

স্নিপেট প্রসারিত করুন

Question 11

সবচেয়ে সহজ উপায়, $("[data-toggle=tooltip]").tooltip();সম্পর্কিত নিয়ামক যোগ করুন ।

Question 12

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>

স্নিপেট প্রসারিত করুন

Question 13

আপনি যদি জিকিউরি-ইউআই ব্যবহার করে থাকেন তবে যদি আপনি কৌণিক জালিতে বুটস্ট্র্যাপ টুলটিপ ব্যবহার করতে চান তবে একটি জিনিস মনে রাখবেন: এটি হওয়া উচিত:

jQuery
jQuery UI
বুটস্ট্যাপ

এটি চেষ্টা করে পরীক্ষা করা হয়

Question 14

আপনি যদি গতিশীলভাবে টুলটিপগুলি বরাদ্দ করেন তবে এটি পড়ুন

অর্থাত্ <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সম্পত্তিটিতে অনুলিপি করুন যাতে এটি বুটস্ট্র্যাপের সরঞ্জামদ্বারা গ্রহণ করবে।
টুলটিপস পুনরায় সক্রিয় করুন

আশা করি এই দীর্ঘ উত্তরটি এমন কাউকে সহায়তা করবে যিনি আমার মতো লড়াই করছিলেন।

Question 15

টুলটিপ ব্যবহার করে দেখুন (ui.bootstrap.tooltip)। বুটস্ট্র্যাপের জন্য কৌনিক নির্দেশাবলী দেখুন

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

অ্যাঙ্গুলারজেএস এর শীর্ষে জাভাস্ক্রিপ্ট কোড এড়ানোর পরামর্শ দেওয়া হচ্ছে

Question 16

মডেলটি পরিবর্তিত হয়ে রিফ্রেশ করার জন্য টুলটিপস পাওয়ার জন্য আমি কেবল 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>

সংস্করণ:

কৌণিক জেএস 1.4.10
বুটস্ট্র্যাপ ৩.১.১
jquery: 1.11.0

Question 17

AngularStrap IE8 তে অ্যাঙ্গুলারজ সংস্করণ 1.2.9 দিয়ে কাজ করে না তাই আপনার অ্যাপ্লিকেশনটি IE8 সমর্থন করার প্রয়োজন হলে এটি ব্যবহার করবেন না

Question 18

@aStewartDesign উত্তর:

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

জ্যাকোরির দরকার নেই, এটি দেরী করে নেওয়া হয়েছে তবে আমি বুঝতে পেরেছি যে শীর্ষে ভোট দেওয়া হয়েছে, আমার এটি প্রকাশ করা উচিত।

Question 19

নির্ভরতা ইনস্টল করুন:

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

এরপরে, আপনার কৌণিক-ক্লিপ.জসনে স্ক্রিপ্ট যুক্ত করুন

"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"
    ]

তারপরে স্ক্রিপ্ট.জেএস তৈরি করুন

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

এখন আপনার সার্ভার পুনরায় চালু করুন।

Question 20

টুলটিপ ফাংশনটির কারণে, আপনাকে কৌনিক জেএসকে বলতে হবে যে আপনি 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>