एकाधिक "डेटा-टॉगल" के साथ बूटस्ट्रैप नियंत्रण

Question

क्या "डेटा-टॉगल" के माध्यम से बूटस्ट्रैप नियंत्रण में एक से अधिक घटनाओं को असाइन करने का एक तरीका है। उदाहरण के लिए, मैं कहता हूं कि मुझे एक बटन चाहिए, जिसमें एक "टूलटिप" और एक "बटन" है जो उसे सौंपा गया है।
डेटा टॉगल करने की कोशिश की = "टूलटिप बटन", लेकिन केवल टूलटिप ने काम किया।

संपादित करें:

यह आसानी से "व्यावहारिक" है

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

यह वास्तव में सबसे अच्छा तरीका है क्योंकि यह प्रस्तुति की चिंता को प्रस्तुति की परत से बचाता है।

— LastTribunal

हालांकि इसमें कुछ अंतर है: 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

इसके साथ समस्या (और इस प्रश्न के अन्य समाधान अभी) यह है कि जब आप मोडल खोलने के लिए क्लिक करते हैं, और फिर इसे बंद करते हैं, तो टूलटिप फिर से दिखाई देता है (या दिखाई देता है) भले ही माउस ने बटन छोड़ दिया हो। यह बहुत ही कष्टप्रद है यदि आपके पास प्रत्येक पंक्ति में एक तालिका में बटन हैं, क्योंकि वे बटन को ऊपर / नीचे ब्लॉक कर सकते हैं। इसे छिपाने का एकमात्र तरीका टूलटिप के बाहर कहीं क्लिक करना है।

— गले

मैं इस दृष्टिकोण को रैपर के साथ स्वीकृत उत्तर से बहुत अधिक पसंद करता हूं। यह बहुत सरल है क्योंकि यह बहुत अधिक डोम को अधिभार के बिना एचटीएमएल 5 क्षमताओं पर फैलता है। इसके अलावा मेरे मामले में रैपर दृष्टिकोण काम नहीं कर रहा था

— कैनेलो डिजिटल

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>

JAVASCRIPT जिसे आप वैसे भी शामिल करने की आवश्यकता है, भले ही आप किस विधि का उपयोग करें।

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

महान। HTML भी जोड़ें।

— Web_Developer

Answer 8

बस @Roman Holzner जवाब पूरक के लिए ...

मेरे मामले में, मेरे पास एक बटन है जो टूलटिप दिखाता है और इसे तब तक अक्षम रहना चाहिए जब तक कि आगे की कार्रवाई न हो जाए। उनके दृष्टिकोण का उपयोग करते हुए, बटन निष्क्रिय होने पर भी मोडल काम करता है, क्योंकि इसका कॉल बटन के बाहर है - मैं लारवेल ब्लेड फ़ाइल में हूं, बस स्पष्ट होने के लिए :)

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

यदि आप इसका परीक्षण करना चाहते हैं, तो JQuery कोड के साथ विशेषता बदलें:

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

जब आप किसी टैग पर मोडल खोलते हैं और शो टूलटिप चाहते हैं और यदि आप टैग के अंदर टूलटिप को लागू करते हैं तो यह टूलटिप को पास के टैग को दिखाएगा। इस तरह

मैं सुझाव दूंगा कि एक टैग के बाहर div का उपयोग करें और "प्रदर्शन: इनलाइन-ब्लॉक;"

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