একাধিক "ডেটা-টগল" সহ বুটস্ট্র্যাপ নিয়ন্ত্রণ

Question

"ডেটা-টগল" এর মাধ্যমে বুটস্ট্র্যাপ নিয়ন্ত্রণে একাধিক ইভেন্ট নিযুক্ত করার উপায় আছে কি? উদাহরণস্বরূপ, আসুন আমি বলি যে আমি এমন একটি বোতাম চাই যা এতে "টুলটিপ" এবং একটি "বোতাম" টগল বরাদ্দ করা আছে।
ডেটা-টগল = "টুলটিপ বোতাম" চেষ্টা করেছে, তবে কেবলমাত্র টুলটিপ কাজ করেছে।

সম্পাদনা করুন:

এটি সহজেই "workaroundable" এর সাথে

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

Answer 1

আপনি যদি জাভাস্ক্রিপ্ট যোগ না করে বা টুলটিপ ফাংশনটি পরিবর্তন না করে কোনও মডেল এবং একটি টুলটিপ যুক্ত করতে চান , আপনি কেবল তার চারপাশে কোনও উপাদান মোড়ানো করতে পারেন:

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>

Comments

এটি আসলে সেরা পন্থা কারণ এটি উপস্থাপনা স্তরটিতে উপস্থাপনের উদ্বেগকে পিছিয়ে দেয়।

— সর্বশেষতম ট্রাইবুনাল

যদিও কিছু পার্থক্য রয়েছে: data-toggle="tooltip"মূল (বোতাম) উপাদানটির ভিতরে একটি উপাদান সেই উপাদানের বাইরে খুব সুন্দরভাবে প্রদর্শিত হবে যখন কোনও স্প্যানের মোড়কের ভিতরে সেট করা থাকলে এটি সেই উপাদানটির সাথে ওভারল্যাপ হবে।

— বেঞ্জামিন

ধন্যবাদ এটি কিভাবে করা উচিত - কোনও জাভাস্ক্রিপ্ট নেই

— tsadkan yitbarek

সংক্ষিপ্ত, সহজ এবং স্মার্ট সমাধান। অ্যাঙ্কর ট্যাগে স্প্যান যোগ করা বুটস্ট্র্যাপে নকশাকে পরিবর্তন করে না তাই এটি মডেল এবং টুলটিপ একসাথে চলার জন্য পারফেক্ট সমাধান।

— অঙ্কিত সুথার

এটি আমার পক্ষে কার্যকর হয়নি<span data-toggle="modal" data-target="#myModalForm" title="Click to edit row" data-row="0" data-cmid="425" data-id="11788" data-src="1.1.1.1" data-src_desc="null" data-dst="2.2.2.2" data-dst_desc="null" data-protocol="TCP" data-ports="80" data-remarks="none"><a class="btn btn-sm btn-info" data-toggle="tooltip" title="Click to edit row" data-original-title="Click to edit row" data-trigger="hover" href="javascript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></span>

— shorif2000

Answer 2

যেহেতু টুলটিপটি স্বয়ংক্রিয়ভাবে আরম্ভ করা হয়নি, তাই আপনি নিজের সরঞ্জামদণ্ডের সূচনাতে পরিবর্তন আনতে পারেন। আমি আমার মতো করেছিলাম:

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

এই মার্কআপ সহ:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

লক্ষ্য করুন data-tooltip।

হালনাগাদ

বা সহজভাবে,

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

Comments

এর সাথে সরলীকৃত: $ ('[ডেটা-টুলটিপ = "টুলটিপ"]')। টুলটিপ ();

— রায়ান কারাহ

আপনার আপডেট হওয়া উত্তরটি ব্যবহার করেছে এবং খুব সহজ ছিল, নিখুঁতভাবে কাজ করেছিল

— দ্য ওয়ান অ্যান্ড

চমৎকার সমাধান মোড়ানো থেকে সেরা

— D3VELOPER

এটির (এবং এই মুহুর্তে এই প্রশ্নের অন্যান্য সমাধানগুলির ক্ষেত্রে) সমস্যাটি হ'ল আপনি যখন মডেলটি খোলার জন্য ক্লিক করেন, এবং তারপরে এটি বন্ধ করেন, তখন মাউসটি বোতামটি ছেড়ে দিলেও টুলটিপটি আবার প্রদর্শিত হয় (বা দৃশ্যমান থাকে)। এটি খুব বিরক্তিকর যদি আপনার উদাহরণস্বরূপ প্রতিটি সারিটিতে একটি টেবিলের বোতাম থাকে, কারণ তারা নীচে বা নীচে বোতামটি ব্লক করতে পারে। এটি লুকানোর একমাত্র উপায় হ'ল টুলটিপের বাইরের কোথাও ক্লিক করা।

— আলিঙ্গন

আমি এই পদ্ধতিকে র‌্যাপার সহ গৃহীত উত্তরের চেয়ে অনেক বেশি পছন্দ করি। এটি খুব সহজ যেহেতু এটি ডমকে খুব বেশি লোড না করে HTML5 সক্ষমতাগুলিতে প্রসারিত করে। এছাড়াও আমার ক্ষেত্রে মোড়কের পদ্ধতির কাজ হবে বলে মনে হয় নি

— ক্যানেলো ডিজিটাল

Answer 3

নিম্নলিখিত jQuery এর সাথে কোনও মার্কআপ পরিবর্তন না করেই আমি এই সমস্যাটি সমাধান করতে সক্ষম হয়েছি। আমার অনুরূপ সমস্যা হয়েছিল যেখানে আমি একটি বোতামে একটি টুলটিপ চেয়েছিলাম যা ইতিমধ্যে একটি মডেলের জন্য ডেটা-টগল ব্যবহার করছিল। আপনাকে এখানে যা করতে হবে তা হ'ল বোতামে শিরোনাম যুক্ত করা।

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

Answer 4

এটি সবেমাত্র কার্যকর করা এটিই সেরা সমাধান:

এইচটিএমএল

<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>

জাভাস্ক্রিপ্ট যে আপনি যেভাবেই ব্যবহার করেন তা নির্বিশেষে আপনাকে অন্তর্ভুক্ত করতে হবে।

$('[rel="tooltip"]').tooltip(); 

Comments

এটি সবচেয়ে পরিষ্কার, অন্তত

— বিঘ্নমূলক

Answer 5

এখনো না. তবে এটি পরামর্শ দেওয়া হয়েছে যে কেউ এই বৈশিষ্ট্যটি একদিন যুক্ত করুন।

নিম্নলিখিত বুটস্ট্র্যাপ গিথুব ইস্যুতে আপনি যা চান তার নিখুঁত উদাহরণ দেখায়। এটি সম্ভব- তবে এই পর্যায়ে আপনার নিজের কাজের কোডটি না লিখেই নয়।

এটা দেখ... :-)

https://github.com/twitter/bootstrap/issues/7011

Comments

দুঃখের বিষয়, এই সমস্যাটি (# 7011) অস্বীকার করা হয়েছে।

— টিজে ক্রাউডার

Answer 6

আমি মডেলটি লোড করতে এবং টুলটিপের জন্য ডেটা-টগল ছেড়ে দিতে href ব্যবহার করি:

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>

Answer 7

বুটস্ট্র্যাপ বাহিনী আপনি শুধুমাত্র জাভাস্ক্রিপ্ট মাধ্যমে টুলটিপ্সে আরম্ভ করতে সাল থেকে আমি পরিবর্তিত data-toggle="tooltip"করার জন্য (যেহেতু এটি তারপর অকাজের) class="bootstrap-tooltip"এবং আমার টুলটিপ্সে আরম্ভ করতে এই জাভাস্ক্রিপ্ট ব্যবহৃত:

$('.bootstrap-tooltip').tooltip();

এবং তাই আমি data-toggleঅন্য কোনও কিছুর জন্য বৈশিষ্ট্যটি ব্যবহার করতে মুক্ত ছিলাম (যেমন data-toggle="button")

Comments

গ্রেট। এইচটিএমএলও যুক্ত করুন।

— ওয়েব_ডভোপার

Answer 8

কেবলমাত্র রোমান হলজনার উত্তরের পরিপূরক ...

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

<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
    <button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

সুতরাং আপনি যদি বোতামটি সক্রিয় থাকে কেবল তখনই মডেলটি দেখাতে চান, আপনি ট্যাগগুলির ক্রম পরিবর্তন করতে হবে:

<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
    <button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

আপনি যদি এটি পরীক্ষা করে দেখতে চান তবে একটি জিকুয়েরি কোডের সাহায্যে বৈশিষ্ট্যটি পরিবর্তন করুন:

$('button[name=delete]').attr('disabled', false);

Answer 9

আরও একটি সমাধান:

    <a data-toggle="modal" data-target="#exampleModalCenter">
      <span
        class="tags"
        data-toggle="tooltip"
        data-placement="right"
        title="Tooltip text"
      >
        Text
     </span>
   </a>

Answer 10

ক্লাস ব্যবহার করে একটি দুর্দান্ত সমাধান রয়েছে .stretched-link। বাটনের একটি ক্লাস থাকতে হবে .position-relative। এখানে একটি পরিপূর্ণ কাজের উদাহরণ:

টুলটিপটি বোতামে যুক্ত করতে হবে অন্যথায় এটির অবস্থানটি ভুল হবে।

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

/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
    <span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
    Click Me!
</button>

<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Modal body</div></div></div></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

Answer 11

আপনি যখন কোনও ট্যাগে মডেলটি খোলেন এবং টুলটিপটি প্রদর্শন করতে চান এবং আপনি যদি ট্যাগটির অভ্যন্তরে টুলটিপটি প্রয়োগ করেন তবে এটি কাছাকাছি ট্যাগটি টুলটিপ প্রদর্শন করবে। এটার মত

আমি প্রস্তাব দেব যে কোনও ট্যাগের বাইরে ডিভ ব্যবহার করুন এবং "প্রদর্শন: ইনলাইন-ব্লক" ব্যবহার করুন use

<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
     <span class="fa fa-plus"></span>
    </a>
</div>

Answer 12

<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>