বুটস্ট্র্যাপ টুলটিপস কাজ করছে না

260

আমি এখানে পাগল হয়ে যাচ্ছি

আমি নিম্নলিখিত এইচটিএমএল পেয়েছি:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

এবং বুটস্ট্র্যাপ স্টাইলের সরঞ্জামদণ্ডটি প্রদর্শন করতে অস্বীকার করেছে, কেবল একটি সাধারণ সরঞ্জামদণ্ড।

আমি ঠিকঠাক কাজ করে বুটস্ট্র্যাপ.এসএস পেয়েছি এবং আমি সেখানে ক্লাস দেখতে পাচ্ছি

আমি আমার এইচটিএমএল ফাইলের শেষে সমস্ত প্রাসঙ্গিক জেএস ফাইল পেয়েছি:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

আমি বুটস্ট্র্যাপের উদাহরণের উত্সটি দেখেছি এবং সেখানকার কোথাও টুলটিপটি সূচনা করে এমন কিছুই দেখতে পাচ্ছি না। সুতরাং আমি অনুমান করছি এটি ঠিক কাজ করা উচিত, বা আমি এখানে অতীব গুরুত্বপূর্ণ কিছু অনুপস্থিত করছি?

আমি মডেল এবং সতর্কতা এবং অন্যান্য জিনিস ঠিকঠাক কাজ করেছি, তাই আমি মোট মুরন না;)

কোন সাহায্যের জন্য ধন্যবাদ!

twitter-bootstrap 
— মাইক বার্টলেট
সূত্র
2
টুলটিপটি অ্যাপ্লিকেশন.জেএস ফাইলে টুইটারের উদাহরণে শুরু করা হচ্ছে। আপনি কি এইচটিএমএল পোস্ট করতে পারবেন? আপনি কীভাবে স্ক্রিপ্টটি আরম্ভ করছেন তা একবার দেখে নিতে চাই।
— আন্দ্রেস ইলিক
2
আহহহ .... আমি প্রথম মন্তব্যটি এড়িয়ে গিয়েছি। সুতরাং এই কাজটি করা উচিত: code<a href="#" rel="tooltip" শিরোনাম="A দুর্দান্ত সরঞ্জামদণ্ড "class="tooltip-test"> পরীক্ষা </a> - <script> // টুলটিপ ডেমো $ (' .tooltip-test ')। টুলটিপ () </script>
— মাইক বার্টলেট
1
টুলটিপ বিকল্পগুলিতে কোনও নির্বাচককে পাস করতে ভুলবেন না,$('.tooltip-test').tooltip({ selector: "a" })
— আন্দ্রেস ইলিচ
ধন্যবাদ আন্দ্রেস আসলে আমার সেখানে নির্বাচকের দরকার হবে বলে মনে হয় নি, আমি মনে করি এটি কারণ ক্লাসটির টুলটিপ-টেস্ট হিসাবে উল্লেখ করা হয়েছে।
— মাইক বার্টলেট
3
সিলেক্টর অপশন ছাড়া টুলটিপটি আমার পক্ষে কাজ করে না, আমি এখানে একটি ডেমো রেখেছি : jsfiddle.net/VXctp , সিলেক্টর ছাড়াই চেষ্টা করে দেখুন।
— আন্দ্রেস ইলিক

উত্তর:

276

সংক্ষিপ্তসার হিসাবে: jQuery নির্বাচনকারীদের ব্যবহার করে আপনার সরঞ্জামদণ্ডগুলি সক্রিয় করুন

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

প্রকৃতপক্ষে, আপনাকে অ্যাট্রিবিউট সিলেক্টর ব্যবহার করার দরকার নেই, আপনি এটি কোনও rel="tooltip"ট্যাগের মধ্যে না থাকলেও এটি কোনও উপাদানটির জন্য আবেদন করতে পারেন ।

— ম্যানুয়েল এবার্ট
সূত্র
13
পাগল সঙ্গে কাজ তাদের জন্য, এটি আগে থেকেই সংজ্ঞায়িত করা হয় bootstrap.js.coffeeসঙ্গে $(".tooltip").tooltip()। //= require bootstrapআপনার মধ্যে অন্তর্ভুক্ত করার বিষয়টি নিশ্চিত করুন application.js।
— slhck
6
কোনও উপাদানগুলিতে টুটিটিপ ক্লাস যুক্ত করা আমার জন্য সরঞ্জামদণ্ডগুলি ভেঙে দেবে। টোলটিপ শ্রেণীর সাথে উপাদানটির ভিতরে থাকা সামগ্রীটি আড়াল হয়ে যাবে এবং আমি যদি আমার মাউসের সাহায্যে লুকানো উপাদানটি খুঁজে পেতে পারি তবে টুলটিপটি দেখাবে। অন্য কোনও নির্বাচক বা শ্রেণীর নাম ব্যবহার করা ভাল কাজ করবে \
— লিওনেল গ্যালান
4
@ লিটো যা সঠিক, বুটস্ট্র্যাপ শৈলীর জন্য .tooltipএবং ডিফল্টরূপে সংজ্ঞা দেয়, সেগুলি অদৃশ্য। relযদিও আপনি নির্বাচক হিসাবে বৈশিষ্ট্য বা অন্য কোনও শ্রেণি ব্যবহার করতে পারেন ।
— ম্যানুয়েল এবার্ট
3
হ্যাঁ, আপনার দুটি দরকার HTML মার্কআপ এবং জেএস নির্বাচনকারীদের। এগুলি টুলটিপগুলি প্রয়োগ করার বিকল্প উপায় নয়।
— এটিসিয়েম
1
কেউ কেউ কোনও মডেলটিতে একটি টুলটিপ প্রদর্শনের চেষ্টা করছেন এবং এটি সমস্ত বুটস্ট্র্যাপ সংস্করণে কাজ করে না। আপনি যদি এটি কোনও সাধারণ পৃষ্ঠায় চেষ্টা করেন, কোনও মডেল নয়, এবং এটি কার্যকর হয় তবে আপনি জানেন যে সমস্যা।
— mjnissim
212

একই সমস্যাটি अनुभव করার পরে, আমি বুটস্ট্র্যাপের প্রয়োজনীয় বৈশিষ্ট্যের বাইরে অতিরিক্ত ট্যাগ বৈশিষ্ট্য যুক্ত না করেই এই সমাধানটি কাজ করে দেখলাম।

এইচটিএমএল

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

আশাকরি এটা সাহায্য করবে!

— মার্কাস হোলসার
সূত্র
20
ধন্যবাদ! এটি আমার পক্ষে কাজ করেছে। এই পৃষ্ঠার অন্য সমাধানগুলি আমার পক্ষে কাজ করছে না।
— রোমান
1
আমি রোমানের সাথে আছি এই সমাধানটি বুটসওচ সিএসএস ভেরিয়েন্টগুলির সাথেও কাজ করে।
— ডেভিসিএস
এটি আমার পক্ষে কাজ করেছে। আমি এটি চেষ্টা না করা পর্যন্ত জীবনে আর কোনও কিছুই লাথি মারেনি। ধন্যবাদ!
— ব্লেকপিটারসন
1
এটি আমার জন্যও কাজ করেছিল। কোনও ধারণা কেন $ ('[ডেটা-টগল = "টুলটিপ"]') idea সরঞ্জামটিপ (place 'প্লেসমেন্ট': 'শীর্ষ'}); কাজ করে না?
— জিরোকুল
ধন্যবাদ, এটি আমার পক্ষে কাজ করেছে। জ্যাকারি লাইব্রেরিটি লোড করার পরে আপনি <script> ট্যাগগুলির মধ্যে কোড সন্নিবেশ করানোর বিষয়টি নিশ্চিত করুন make
— জেরাল্ডস্কট
31

আপনার আলাদা আলাদাভাবে সমস্ত জেএস ফাইলের দরকার নেই

আপনি যদি সমস্ত বুটস্ট্র্যাপ ফাংশন ব্যবহার করতে চলেছেন তবে নিম্নলিখিত ফাইলগুলি ব্যবহার করুন:

-bootstrap.css
-bootstrap.js

তাদের উভয়ই http://twitter.github.com
এবং শেষ
অবধি jquery.js- এর সর্বশেষ সংস্করণে পাওয়া যাবে

গ্লাইফিকনগুলির জন্য আপনার চিত্রটি প্রয়োজন

glyphicons-halfings.png এবং / অথবা glyphicons-halfings-white.png (সাদা বর্ণের চিত্র)
যা আপনার ওয়েবসাইটের / img / ফোল্ডারের ভিতরে আপলোড করতে হবে (বা) যেখানে আপনি চান সেখানে সংরক্ষণ করুন তবে বুটস্ট্র্যাপের ভিতরে ফোল্ডার ডিরেক্টরিটি পরিবর্তন করুন সিএসএস

সরঞ্জামদণ্ডের জন্য আপনার <head> </head>ট্যাগের মধ্যে আপনার নিম্নলিখিত স্ক্রিপ্টের প্রয়োজন 

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

এটাই...

— হরিশ কুমার
সূত্র
27

http://getbootstrap.com/javascript/#tooltips-usage

কার্য-কার্যকারিতা অপ্ট-ইন কার্যকারিতা কারণে, টুলটিপ এবং পপওভার ডেটা-এপিগুলি অপ্ট-ইন অর্থ

এগুলি আপনাকে নিজেই শুরু করতে হবে।

কোনও পৃষ্ঠার সমস্ত সরঞ্জামদণ্ডকে আরম্ভ করার একটি উপায় হ'ল তাদের ডেটা-টগল বৈশিষ্ট্য দ্বারা তাদের নির্বাচন করা:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

কোডটির এই অংশটি আপনার এইচটিএমএলতে রাখার ফলে আপনি সরঞ্জামদণ্ডগুলি ব্যবহার করতে পারবেন

উদাহরণ:

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

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
— সর্বোচ্চ ও।
সূত্র
2
এই বিকল্পটি ভাগ করে নেওয়ার জন্য ধন্যবাদ! কোনও টিউটোরিয়াল থেকে এটি কখনই পড়বেন না।
— dpp
আমার jquery / বুটস্ট্র্যাপের সকলের সমাধান টুলটিপ
— whoas
সেখানে দেওয়া সংযোগে হারিয়েছে: এ দয়া বর্ণন getbootstrap.com/docs/4.1/components/tooltips
— Guillaume, Husta
20

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে যেহেতু বুটস্ট্র্যাপের নতুন প্রকাশের সাথে আমার এই সমস্যা হয়েছিল এবং এটি ওয়েবসাইটটিতে পরিষ্কার নয়, আপনি কীভাবে টুলটিপটি সক্ষম করবেন তা এখানে।

আপনার উপাদানটিকে "সরঞ্জামদণ্ড-পরীক্ষা" এর মতো একটি শ্রেণি দিন

তারপরে আপনার জাভাস্ক্রিপ্ট ট্যাগটিতে এই শ্রেণিটি সক্রিয় করুন:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— আমির সলেমানি
সূত্র
এটি আমার জন্য কাজ করা একমাত্র সমাধান ছিল। আমি শিরোনাম আপডেট করতে ডেটা-অরিজিনাল-শিরোনাম = "{{someAngularJSVar}}" ব্যবহার করছি এবং এটি নির্দোষভাবে কাজ করছে।
— WKara
19

এইচটিএমএল

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $('[data-toggle=tooltip]').tooltip();
});

এই আমার জন্য কাজ।

— ইগর শ্যাভডোক
সূত্র
1
এই প্রস্তাবটি আমার জন্যও পুরোপুরি কাজ করেছিল। আমি এটি পছন্দ করেছি কারণ এটি সহজ এবং মার্জিত। এটি আপনাকে বুটস্ট্র্যাপ স্ট্যান্ডার্ডগুলি ব্যবহার করে চালিয়ে যেতে দেয় যেমন ডিফল্টরূপে প্লাগইনটি শুরু হয়েছিল, যেমন ড্রপডাউন এবং ট্যাব উপাদানগুলির সাথে ঘটে। আমি @ ইগোর দ্বারা প্রস্তাবিত জেএসকে একটি নতুন ফাইলে যুক্ত করে এটিকে মূল বুটস্ট্র্যাপ.জেএস
— ইয়াগো
14

যদি আপনি $("[rel='tooltip']").tooltip();অন্যান্য উত্তরগুলির পরামর্শ মতো করে থাকেন তবে আপনি কেবলমাত্র ডিওমে থাকা উপাদানগুলিতেই সরঞ্জামচালনা সক্রিয় করবেন। এর অর্থ আপনি যদি ডিওএম পরিবর্তন করতে যান এবং গতিশীল সামগ্রীগুলি পরে sertোকান তবে এটি কাজ করবে না। এছাড়াও এটি অনেক কম দক্ষ কারণ এটি জিকুয়েরি ইভেন্ট প্রতিনিধি ব্যবহারের বিপরীতে পৃথক উপাদানগুলির জন্য ইভেন্ট হ্যান্ডলারটি ইনস্টল করে। সুতরাং বুটস্ট্র্যাপ টুলটিপস সক্রিয় করার জন্য আমি যে সেরা উপায়টি খুঁজে পেয়েছি তা হ'ল এটি কোডের একটি লাইন যা আপনি নথিতে প্রস্তুত রাখতে পারেন এবং এটিকে ভুলে যেতে পারেন:

$(document.body).tooltip({ selector: "[title]" });

মনে রাখবেন যে আমি বা এর titleপরিবর্তে নির্বাচক হিসাবে ব্যবহার করছি । এটির একটি সুবিধা রয়েছে যে এটি অন্যান্য অনেক উপাদানগুলিতে প্রয়োগ করা যেতে পারে (এটি কেবল অ্যাঙ্করদের জন্য বলে মনে করা হয়) এবং এটি পুরানো ব্রাউজারগুলির জন্য "ফ্যালব্যাক" হিসাবে কাজ করে।rel=titledata-titlerel

এছাড়াও মনে রাখবেন যে আপনি data-toggle="tooltip"যদি উপরের কোডটি ব্যবহার করে থাকেন তবে আপনাকে অ্যাট্রিবিউট লাগবে না ।

বুটস্ট্র্যাপ টুলটিপগুলি ব্যয়বহুল কারণ আপনার প্রতিটি উপাদানের মাউস ইভেন্টগুলি পরিচালনা করতে হবে। এ কারণেই তারা এটি ডিফল্টরূপে সক্ষম করে নি। সুতরাং আপনি যদি কখনও লাইন উপরে মন্তব্য করার সিদ্ধান্ত নিয়ে থাকেন তবে আপনি শিরোনাম বৈশিষ্ট্যটি ব্যবহার করলে আপনার পৃষ্ঠাটি এখনও কাজ করবে।

আপনি যদি শিরোনাম বৈশিষ্ট্যটি ব্যবহার না করে ঠিক থাকেন তবে আমি বিশুদ্ধ সিএসএস সমাধান যেমন হিন্ট সিএসএস ব্যবহার করার প্রস্তাব দিচ্ছি বা http://csstooltip.com যাচাইয়ের জন্য কোনও জাভাস্ক্রিপ্ট কোডের প্রয়োজন হয় না তা পরীক্ষা করে দেখুন।

— শীতল শাহ
সূত্র
আমি এটির সাথে লড়াই করছি কারণ গতিশীল প্রজন্ম বেশ কয়েকটি স্তর পর্যন্ত গভীর। এইচআরএফ মানটি গতিশীলভাবে উত্পন্ন সামগ্রী এবং ফলাফল ডিভিডি আইডি আইটেম নম্বরের উপর ভিত্তি করে তৈরি হয় যা href মানটির সাথে মেলে। সুতরাং যদি আমি আইটেম টাইপ এ এর ​​লিঙ্কগুলির একটি পৃষ্ঠা পেয়েছি, তবে আমার কাছে আইটেমের তালিকা রয়েছে একটি -1, আইটেম এ -2, আইটেম এ -3, এই লিঙ্কগুলির প্রতিটি আইটেমের স্বতন্ত্র পৃষ্ঠায়, তবে আমি চাই হাওয়ারে গতিশীল সামগ্রী প্রদর্শন করার জন্য সরঞ্জামদণ্ডের সামগ্রী, যাতে ব্যবহারকারী পুরো লিঙ্কে ক্লিক করার আগে আইটেমটির কিছু ধারণা পেতে পারে।
— মেলানিয়া সুমনার
এটি সবচেয়ে সহায়ক ছিল। আইকনটির সাথে আবদ্ধ হওয়ার জন্য আমার কাছে সরঞ্জামটিপ সেট ছিল এবং আইকন লাইব্রেরিতে একরকম অ্যাসিনক্রোনাস লোডিং ছিল যাতে এটি আবদ্ধ না হয়। এটি এত বিস্ময়কর ছিল কারণ শ্রেণি নির্বাচক ব্যবহার করার সময় এটি কাজ করবে তবে আইডি নয়। আপনার সাহায্যের জন্য ধন্যবাদ!
— নিক উডহামস
14

এটি সহজতম উপায়। শুধু এই আগে রাখুন </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

সরঞ্জামদ্বার সম্পর্কে বুটস্ট্র্যাপের ডকুমেন্টেশনে প্রদত্ত উদাহরণগুলি দেখুন ।

উদাহরণ স্বরূপ: 

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>
— মার্কোস ক্যাসিয়ানো
সূত্র
2
দয়া করে প্রকারের বৈশিষ্ট্যটি বন্ধ করুন ... কেবলমাত্র একটি একক টাইপ সম্পাদনা করা পিটা: এস
— মোহাম্মদ আবদুল মুজিব
10

টুলটিপ এবং পপওভারগুলি কেবল ড্রপডাউন বা প্রগতিবারের মতো সিএসএস প্লাগইন নয়। টুলটিপস এবং পপওভার ব্যবহার করার জন্য, আপনাকে জিকুরি (জাভাস্ক্রিপ্ট পড়ুন) ব্যবহার করে তাদের সক্রিয় করতে হবে।

সুতরাং, আসুন আমরা একটি এইচটিএমএল বোতামের ক্লিকে একটি পপওভার দেখানো চাই lets

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

তারপরে পপওভার সক্রিয় করতে আপনার নীচের জাভাস্ক্রিপ্ট কোড থাকা দরকার:

$('.popovers-to-be-activated').popover();

আসলে, উপরে জাভাস্ক্রিপ্ট কোড সমস্ত এইচটিএমএল উপাদানগুলিতে পপওভার সক্রিয় করবে যা ক্লাস "পপওভার-টু-অ্যাক্টিভেটেড" রয়েছে have

বলা বাহুল্য, ডিওএম প্রস্তুত হওয়ার সাথে সাথে সমস্ত পপওভার সক্রিয় করার জন্য উপরের জাভাস্ক্রিপ্টটি ডোম-রেডি কলব্যাকের ভিতরে রাখুন:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— মায়াঙ্ক জয়সওয়াল
সূত্র
5

প্রধান বিভাগে আপনাকে নিম্নলিখিত কোডটি প্রথমে যুক্ত করতে হবে

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});
</script>

তারপরে বডি সেকশনে আপনাকে নিম্নলিখিত কোডটি লিখতে হবে

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

— Rush.2707
সূত্র
4

যদি এখনও সবকিছু সমাধান না করা হয় তবে সর্বশেষ জ্যাকুরি লাইব্রেরিটি ব্যবহার করুন, আপনি যদি সর্বশেষতম বুটস্ট্র্যাপ ২.০.৪ এবং jquery-1.7.2.js ব্যবহার করেন তবে আপনাকে jquery নির্বাচকদের কোনও প্রয়োজন নেই need

শুধু ব্যবহার rel="tooltip" title="Your Title" data-placement=" "

আপনার ইচ্ছানুযায়ী ডেটা-প্লেসমেন্টে উপরে / নীচে / বাম / ডান ব্যবহার করুন।

— হরিশ কুমার
সূত্র
3

আমি হেডারে jquery এবং বুটস্ট্র্যাপ-টুলটিপ.জেগুলি যুক্ত করেছি। পাদচরণে এই কোড যুক্ত করা আমার পক্ষে কাজ করে! তবে আমি যখন হেডারে একই কোড যুক্ত করি তখন এটি কার্যকর হয় না! 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— কার্তিক
সূত্র
3
এই ক্ষেত্রে DOM এখনও লোড হয়নি তাই সমস্ত উপাদান পৃষ্ঠাতে আমার অস্তিত্ব নেই। উপরের কোডটি মোড়ানো$(function() { ... });
— জন
3

যদি টেলটিপটি অন্তর্ভুক্ত করার জন্য রেল + হামল ব্যবহার করা আরও সহজ হয় তবে কেবল করুন:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

এটি কেবলমাত্র উপাদানটির শেষে নিম্নলিখিত লাইনটি যুক্ত করা হবে।

:rel => "tooltip", :title => "Referential Guide"
— আন্দ্রেস ক্যাল
সূত্র
সত্যিই আশা ছিল যে এটি আমার জন্য কাজ করবে, কিন্তু হায় হায় তা হয়নি।
— টার্বোলেডেন
আমি এখন রেলগুলির চেয়ে জ্যান্তোতে আরও বেশি আছি তবে আপনি যদি আপনার কোডটি পেস্ট করেন তবে আমি আপনাকে কিছু টিপস দেওয়ার চেষ্টা করতে পারি।
— অ্যান্ড্রেস কল
3

আমার বিশেষ ক্ষেত্রে, এটি কার্যকর হয়নি কারণ আমি jQuery এর দুটি সংস্করণ অন্তর্ভুক্ত ছিল। বুটস্ট্র্যাপের জন্য একটি, তবে গুগল চার্টের জন্য অন্য একটি (অন্য সংস্করণ)।

আমি যখন চার্টের জন্য jQuery লোডিং সরিয়ে ফেলি, এটি ঠিকঠাক কাজ করে।

— ডিটার
সূত্র
3

আমি সবে যুক্ত করেছি:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

bootstrap.min.js এর নীচে এবং এটি কাজ করে।

— Andy.sin
সূত্র
3

কীভাবে আপনার দস্তাবেজের কোনও HTML উপাদানটিতে সরঞ্জামদণ্ডগুলি যুক্ত করা যায় তা প্রদর্শন করার জন্য একটি উদাহরণ ব্যবহার করুন।

বিঃদ্রঃ:

আপনি যদি নিজের পৃষ্ঠাতে রাখেন তখন এই সরঞ্জামদণ্ডের নমুনাগুলি যদি কাজ না করে তবে আপনার আর একটি সমস্যা আছে। আপনি যেমন জিনিস তাকান প্রয়োজন:

  • স্ক্রিপ্টগুলির ক্রম অন্তর্ভুক্ত
  • আপনি সরানো হয়েছে এমন HTML উপাদানগুলি আরম্ভ করার চেষ্টা করছেন কিনা তা দেখুন
  • আপনি এখন আর অন্তর্ভুক্ত না করে জেএস ফাইলগুলিতে পদ্ধতিগুলি কল করার চেষ্টা করছেন কিনা তা দেখুন

  • আপনি যদি জেএস ফাইল অন্তর্ভুক্ত করছেন যা আপনার প্রয়োজনীয় কার্যকারিতা সরবরাহ করে কিনা (কেবলমাত্র সরঞ্জামের জন্য নয়, তবে আপনি পৃষ্ঠায় যে কোনও উপাদান ব্যবহার করেন)।

    <head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

উপরের আইটেমগুলির মধ্যে যে কোনও একটির ব্যর্থতা জাভাস্ক্রিপ্টকে লোডিং এবং / বা চালানো থেকে রোধ করতে পারে এবং যা সবকিছু সুন্দর এবং ভাঙ্গা রাখে।

কাজের উদাহরণ

ধরা যাক আপনার একটি ব্যাজ রয়েছে এবং আপনি যখন এটি ব্যবহার করেন তখন এটি কোনও সরঞ্জামদণ্ডটি প্রদর্শন করতে চান।

আসল এইচটিএমএল:

<span class="badge badge-sm badge-plain">Admin Mode</span>

সমতল বুটস্ট্র্যাপ টুলটিপস

আপনি যদি কোনও এইচটিএমএল এলিমেন্টের জন্য টুলটিপগুলি তৈরি করে থাকেন এবং আপনি সরল বুটস্ট্র্যাপ টুলটিপস ব্যবহার করছেন তবে আপনি নিজের জাভাস্ক্রিপ্ট কোড দিয়ে টুলটিপ ইনিশিয়ালাইজারদের কল করার জন্য দায়বদ্ধ হবেন।

আগে

<span class="badge badge-sm badge-plain">Admin Mode</span>

পরে

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

সূচনাকারী

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

বুটস্ট্র্যাপ টেম্পলেট টুলটিপস (যেমন ইনস্পিনিয়া)

আপনি যদি বুটস্ট্র্যাপ টেম্পলেট ব্যবহার করছেন (যেমন INSPINIA), আপনি টেমপ্লেট বৈশিষ্ট্যগুলি সমর্থন করার জন্য একটি সমর্থনকারী স্ক্রিপ্ট অন্তর্ভুক্ত করছেন:

    <script src="/Scripts/app/inspinia.js" />

INSPINIA- র ক্ষেত্রে অন্তর্ভুক্ত স্ক্রিপ্টটি ডকুমেন্টটি লোড করা শেষ হলে স্বয়ংক্রিয়ভাবে নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটি চালিয়ে সমস্ত সরঞ্জামদণ্ড শুরু করে:

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

এ কারণে, আপনাকে নিজের মতো করে এএসপিআইএনএ-স্টাইলের সরঞ্জামটিপস আরম্ভ করতে হবে না। তবে আপনাকে আপনার উপাদানগুলিকে একটি নির্দিষ্ট উপায়ে ফর্ম্যাট করতে হবে। সঙ্গে এইচটিএমএল উপাদানের জন্য সূচনাকারী সৌন্দর্য tooltip-demoমধ্যে classঅ্যাট্রিবিউট, তারপর কল tooltip()কোনো আরম্ভ করতে পদ্ধতি সন্তান উপাদান অ্যাট্রিবিউট আছে data-toggle="tooltip"সংজ্ঞায়িত।

উদাহরণস্বরূপ ব্যাজ জন্য, (ক মত এটি প্রায় একটি বাইরের উপাদান স্থান <div>বা <span>) আছে যে class="tooltip-demo", তারপর স্থান data-toggle, data-placementএবং titleউপাদান ব্যাজ যে মধ্যে প্রকৃত টুলটিপ জন্য বৈশিষ্ট্যাবলী। এ জাতীয় কিছু দেখতে উপরের মূল HTMLটি সংশোধন করুন:

আগে

<span class="badge badge-sm badge-plain">Admin Mode</span>

পরে

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

সূচনাকারী

None

নোট করুন যে উপাদানটির মধ্যে থাকা কোনও শিশু উপাদানগুলির <span class="tooltip-demo">সরঞ্জামদণ্ড সঠিকভাবে প্রস্তুত থাকবে। আমার কাছে তিনটি শিশু উপাদান থাকতে পারে, যা সবার প্রয়োজনের সরঞ্জামদণ্ডগুলির প্রয়োজন এবং এগুলি একটি পাত্রে রেখে দেওয়া।

একাধিক আইটেম, প্রতিটি একটি টুলটিপ সহ

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

এই জন্য শ্রেষ্ঠ ব্যবহার যোগ করার জন্য হবে class="tooltip-demo"একটি করতে <td>অথবা একটি দূরতম <div>বা <span>।

টেম্পলেট ব্যবহার করার সময় সমতল বুটস্ট্র্যাপ টুলটিপস

আপনি যদি ইনস্পিনিয়া ব্যবহার করছেন তবে আপনি টুলটিপগুলি তৈরি করতে অতিরিক্ত বহিরাগত <div>বা <span>ট্যাগ যুক্ত করতে চান না , আপনি টেমপ্লেটটিতে হস্তক্ষেপ না করে স্ট্যান্ডার্ড বুটস্ট্র্যাপ টুলটিপস ব্যবহার করতে পারেন। এক্ষেত্রে আপনি নিজেই টুলটিপস আরম্ভ করার জন্য দায়বদ্ধ হবেন। তবে classআপনার টুলটিপ আইটেমগুলি শনাক্ত করতে আপনাকে এট্রিবিউটে কাস্টম মান ব্যবহার করা উচিত । এটি INPINIA দ্বারা প্রভাবিত উপাদানগুলির সাথে হস্তক্ষেপ থেকে আপনার টুলটিপ ইনিশিয়ালাইজারকে রাখবে। আমাদের উদাহরণে, এর ব্যবহার করুন standalone-tt:

আগে

<span class="badge badge-sm badge-plain">Admin Mode</span>

পরে

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

সূচনাকারী

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>
— মাইক স্থিরতা
সূত্র
2

আপনি যদি নিজের এইচটিএমএল তৈরি করছেন যা জাভাস্ক্রিপ্ট সহ টুলটিপটি ধারণ করে এবং তারপরে এটি নথিতে সন্নিবেশ করানো হচ্ছে, আপনি ডকুমেন্টে এইচটিএমএল সন্নিবেশ করানোর পরে পপওভার / টুলটিপ সক্রিয় করতে হবে ...

— chri_chri
সূত্র
2

এইচটিএমএলের পরে আপনাকে অবশ্যই টুলটিপ জাভাস্ক্রিপ্ট স্থাপন করতে হবে । এটার মত :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

অথবা $ (নথি) ব্যবহার করুন। প্রস্তুত: 

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

টুলটিপটি কাজ করছে না কারণ আপনি জাভাস্ক্রিপ্টের আগে টুলটিপ এইচটিএমএল রেখেছেন , সুতরাং তারা জানেন না যে সরঞ্জামদণ্ডের জন্য জাভাস্ক্রিপ্ট আছে কিনা। আমার মতে, স্ক্রিপ্টটি উপরে থেকে নীচে পর্যন্ত পড়া হয়।

— জুম্
সূত্র
2

আমার একটি অনুরূপ সমস্যা ছিল এবং বিশেষত যদি আপনি উল্লম্ব বোতাম ধারকটির মতো কোনও বোতাম ধারক হিসাবে চালাচ্ছেন। সেক্ষেত্রে আপনাকে ধারকটিকে 'বডি' হিসাবে সেট করতে হবে

I have added a jsfiddle example

উদাহরণ

— শন ভাদার
সূত্র
1

টুলটিপসের বুটস্ট্র্যাপ ডক্স থেকে

সরঞ্জামদণ্ডগুলি কার্য সম্পাদনের কারণে অপ্ট-ইন হয়, সুতরাং আপনাকে সেগুলি নিজেই শুরু করতে হবে। কোনও পৃষ্ঠার সমস্ত সরঞ্জামদণ্ডকে আরম্ভ করার একটি উপায় হ'ল তাদের ডেটা-টগল বৈশিষ্ট্যের মাধ্যমে তাদের নির্বাচন করা:

  $('[data-toggle="tooltip"]').tooltip()
— রহিল আহমদ
সূত্র
0

আপনার নিম্নলিখিতগুলি করা দরকার। যুক্ত করুন

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

আপনার পৃষ্ঠায় কোথাও কোড (পছন্দমতো <head>বিভাগে)

data-toggle: "tooltip"এটির সাহায্যে আপনি সক্ষম করতে চান এমন কোনও কিছুতে যুক্ত করুন ।

— ক্যালাম চাইল্ডস
সূত্র
-2

বুটস্ট্র্যাপ টুলটিপ প্লাগইনের দ্রুত এবং হালকা বিকল্প:

এইচটিএমএল:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

সিএসএস:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JScript:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

লেবেল / পাঠ্যটি অবশ্যই "মাইটোলটিপ" শ্রেণীর একটি মোড়কে আবদ্ধ থাকতে হবে এই মোড়কটির অবশ্যই একটি আইডি থাকতে হবে।

লেবেলের পরে ক্লাস "মাইটোল্টিপেক্সটেক্সট" বিভাগের ডিভাইসে মোড়ানো টুল টিপের পাঠ্য রয়েছে এবং প্যারেন্ট র‌্যাপারের আইডি "+ _টেক্সট" থাকে " নির্বাচকদের জন্য অন্যান্য বিকল্প ব্যবহার করা যেতে পারে।

আশা করি এটা সাহায্য করবে.

— jdisla
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.