เคล็ดลับเครื่องมือ Bootstrap ไม่ทำงาน

260

ฉันจะโกรธที่นี่

ฉันได้รับ HTML ดังต่อไปนี้:

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

และคำแนะนำเครื่องมือสไตล์ Bootstrap ปฏิเสธที่จะแสดงเพียงคำแนะนำเครื่องมือปกติ

ฉันมี bootstrap.css ทำงานได้ดีและฉันสามารถดูชั้นเรียนในนั้น

ฉันมีไฟล์ JS ที่เกี่ยวข้องทั้งหมดที่ท้ายไฟล์ HTML ของฉัน:

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

ฉันได้ดูที่มาของตัวอย่างของ Bootstrap และไม่เห็นสิ่งใดที่เริ่มต้นคำแนะนำเครื่องมือในที่นั้น ดังนั้นฉันเดาว่ามันควรจะใช้ได้หรือฉันขาดสิ่งสำคัญที่นี่

ฉันได้รับ modal และการแจ้งเตือนและสิ่งอื่น ๆ ที่ทำงานได้ดีดังนั้นฉันจึงไม่ได้ปัญญาอ่อนทั้งหมด)

ขอบคุณสำหรับความช่วยเหลือใด ๆ !

twitter-bootstrap 
— Mike Bartlett
แหล่งที่มา
2
คำแนะนำเครื่องมือกำลังเริ่มต้นในไฟล์ application.js ในตัวอย่าง twitters คุณสามารถโพสต์ html ของคุณได้หรือไม่ ต้องการดูว่าคุณเริ่มต้นสคริปต์อย่างไร
— Andres Ilich
2
Ahhhhh .... ฉันเพิกเฉยที่ให้ความคิดเห็นแรก ดังนั้นจึงควรใช้งานได้: code<a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test"> ทดสอบ </a> </a> <br> <script> // tooltip demo $ (' .tooltip-test '). tooltip () </script>
— Mike Bartlett
1
อย่าลืมส่งตัวเลือกไปยังตัวเลือกคำแนะนำเครื่องมือ$('.tooltip-test').tooltip({ selector: "a" })
— Andres Ilich
ขอบคุณ Andres จริงๆแล้วฉันไม่ได้ต้องการตัวเลือกในนั้นฉันคิดว่านั่นเป็นเพราะคลาสของ a ถูกอ้างถึงเป็นคำแนะนำในการทดสอบเครื่องมือ
— Mike Bartlett
3
หากไม่มีตัวเลือกตัวเลือก Tooltip จะไม่ทำงานสำหรับฉันนี่คือตัวอย่างที่ฉันวางไว้: jsfiddle.net/VXctpลองโดยไม่มีตัวเลือก
— Andres Ilich

คำตอบ:

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
การเพิ่ม class .tooltip ให้กับองค์ประกอบใด ๆ จะทำให้คำแนะนำเครื่องมือของฉันแตก เนื้อหาภายในองค์ประกอบที่มี class .tooltip จะซ่อนและคำแนะนำเครื่องมือจะแสดงหากฉันจัดการพบองค์ประกอบที่ซ่อนอยู่ด้วยเมาส์ของฉัน การใช้ตัวเลือกหรือชื่อชั้นเรียนอื่นจะทำงานได้ดี \
— Leonel Galán
4
@Leito ที่ถูกต้อง bootstrap กำหนดสไตล์สำหรับ.tooltipและตามค่าเริ่มต้นพวกเขาจะมองไม่เห็น คุณสามารถใช้relคุณสมบัติหรือคลาสอื่นเป็นตัวเลือกได้
— Manuel Ebert
3
ใช่คุณต้องมีทั้ง HTML Markup และ JS Selectors นี่ไม่ใช่วิธีอื่นในการใช้เคล็ดลับเครื่องมือ
— ATSiem
1
บางคนอาจพยายามที่จะแสดงคำแนะนำเครื่องมือใน modal และไม่สามารถใช้ได้ในทุกรุ่น bootstrap หากคุณลองในหน้าปกติไม่ใช่แบบโมดัลและใช้งานได้แล้วคุณจะรู้ว่านั่นเป็นปัญหา
— mjnissim
212

หลังจากประสบปัญหาเดียวกันฉันพบว่าวิธีนี้ใช้ได้ผลโดยไม่ต้องเพิ่มแอตทริบิวต์แท็กเพิ่มเติมนอกเหนือจากแอตทริบิวต์ที่จำเป็นสำหรับ Bootstrap

HTML

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

JQuery

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

หวังว่านี่จะช่วยได้!

— Marcus Hoelscher
แหล่งที่มา
20
ขอบคุณ! สิ่งนี้ใช้ได้สำหรับฉัน โซลูชันอื่น ๆ ในหน้านี้ไม่ทำงานสำหรับฉัน
— โรมัน
1
ฉันอยู่กับโรมัน วิธีการแก้ปัญหานี้ทำงานร่วมกับตัวแปร css bootswatch เช่นกัน
— DaveCS
สิ่งนี้ใช้ได้สำหรับฉัน ไม่มีอะไรที่ทำให้มันเป็นจริงจนกว่าฉันจะลอง ขอบคุณ!
— BlakePetersen
1
มันก็ใช้ได้กับฉันเช่นกัน ความคิดใด ๆ ว่าทำไม $ ('[data-toggle = "tooltip"]') tooltip ({'ตำแหน่ง': 'top'}); ไม่ทำงานใช่ไหม
— ZeroCool
ขอบคุณสิ่งนี้ใช้ได้สำหรับฉัน เพียงให้แน่ใจว่าคุณใส่รหัสระหว่างแท็ก <script> หลังจากที่คุณโหลดไลบรารี JQuery
— GeraldScott
31

คุณไม่จำเป็นต้องแยกไฟล์ js ทั้งหมด

เพียงใช้ไฟล์ต่อไปนี้หากคุณจะใช้ฟังก์ชั่น bootstrap ทั้งหมด:

-bootstrap.css
-bootstrap.js

ทั้งสองสามารถพบได้ในhttp://twitter.github.com
และสุดท้าย
- รุ่นล่าสุดของ jquery.js

สำหรับ Glyphiconsคุณต้องการรูปภาพ

glyphicons-halfings.png และ / หรือ glyphicons-halfings-white.png (ภาพสีขาว)
ซึ่งคุณต้องอัปโหลดภายใน / img / โฟลเดอร์ของเว็บไซต์ของคุณ (หรือ) เก็บไว้ในที่ที่คุณต้องการ แต่เปลี่ยนไดเรกทอรีโฟลเดอร์ภายใน bootstrap .css

สำหรับคำแนะนำเครื่องมือคุณต้องใช้สคริปต์ต่อไปนี้ภายใน<head> </head>แท็กของคุณ 

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

แค่นั้นแหละ...

— Harish Kumar
แหล่งที่มา
27

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

ฟังก์ชั่นที่เลือกใช้เพื่อเหตุผลด้านประสิทธิภาพ Tooltip และ Popover data-apis เป็นแบบ opt-in, ความหมาย

คุณต้องเริ่มต้นด้วยตัวเอง

วิธีหนึ่งในการเริ่มต้นเคล็ดลับเครื่องมือทั้งหมดบนหน้าเว็บคือเลือกโดยใช้แอตทริบิวต์ data-toggle

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

การวางโค้ดนี้ไว้ใน html ของคุณช่วยให้คุณสามารถใช้คำแนะนำเครื่องมือได้

ตัวอย่าง:

<!-- 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 / bootstrap tooltip ของฉันทั้งหมด
— DJ
ลิงก์ที่ให้ไว้ขาดหายไป: โปรดดูที่getbootstrap.com/docs/4.1/components/tooltips
— Guillaume
20

ฉันรู้ว่านี่เป็นคำถามเก่า แต่เนื่องจากฉันมีปัญหากับ bootstrap รุ่นใหม่และไม่ชัดเจนในเว็บไซต์นี่คือวิธีที่คุณเปิดใช้งานคำแนะนำเครื่องมือ

ให้องค์ประกอบของคุณมีคลาสเช่น "tooltip-test"

จากนั้นเปิดใช้งานคลาสนี้ในแท็ก javascript ของคุณ:

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

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— Amir Soleymani
แหล่งที่มา
นี่เป็นทางออกเดียวที่ทำงานสำหรับฉัน ฉันใช้ data-original-title = "{{someAngularJSVar}}" เพื่ออัปเดตชื่อและมันใช้งานได้อย่างไม่มีที่ติ
— WKara
19

HTML

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

JQuery

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

อันนี้ใช้ได้สำหรับฉัน

— Igor Shvydok
แหล่งที่มา
1
ข้อเสนอนี้ทำงานได้อย่างสมบูรณ์แบบสำหรับฉันเช่นกัน ฉันชอบมันเพราะเรียบง่ายและสง่างาม มันช่วยให้คุณใช้มาตรฐานBootstrapราวกับว่าปลั๊กอินนั้นเริ่มต้นโดยค่าเริ่มต้นเช่นเกิดขึ้นกับองค์ประกอบแบบหล่นลงและแท็บ ฉันเพิ่ม JS ที่เสนอโดย @Igor ไปยังไฟล์ใหม่และรวมเข้ากับ bootstrap.js ดั้งเดิม
— Iago Rodríguez-Quintana
14

หากคุณทำ$("[rel='tooltip']").tooltip();ตามคำตอบอื่น ๆ แล้วคุณจะเปิดใช้งานเคล็ดลับเครื่องมือเฉพาะในองค์ประกอบที่มีอยู่ใน DOM ซึ่งหมายความว่าหากคุณกำลังจะเปลี่ยน DOM และใส่เนื้อหาแบบไดนามิกในภายหลังจะไม่ทำงาน นอกจากนี้สิ่งนี้มีประสิทธิภาพน้อยกว่ามากเนื่องจากจะติดตั้งตัวจัดการเหตุการณ์สำหรับองค์ประกอบแต่ละตัวซึ่งต่างจากการใช้การมอบหมายเหตุการณ์ JQuery ดังนั้นวิธีที่ดีที่สุดที่ฉันพบเพื่อเปิดใช้งานคำแนะนำเครื่องมือ Bootstrap คือโค้ดหนึ่งบรรทัดที่คุณสามารถวางไว้ในเอกสารพร้อมและลืมมันได้:

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

โปรดทราบว่าฉันใช้titleเป็นตัวเลือกแทนหรือrel=title data-titleนี้มีประโยชน์ที่จะสามารถนำไปใช้กับองค์ประกอบอื่น ๆ จำนวนมาก (คนrelถูกควรจะเป็นเพียงสำหรับเบรก) และยังทำงานเป็น "ทางเลือก" สำหรับเบราว์เซอร์เก่า

โปรดทราบว่าคุณไม่จำเป็นต้องใช้data-toggle="tooltip"แอตทริบิวต์หากคุณใช้รหัสด้านบน

เคล็ดลับเครื่องมือ Bootstrap มีราคาแพงเพราะคุณต้องจัดการกับเหตุการณ์เมาส์ในแต่ละองค์ประกอบ นี่คือเหตุผลที่พวกเขาไม่ได้เปิดใช้งานโดยค่าเริ่มต้น ดังนั้นหากคุณตัดสินใจที่จะใส่ความคิดเห็นไว้เหนือบรรทัดหน้าของคุณจะยังใช้งานได้หากคุณใช้แอตทริบิวต์ title

หากคุณโอเคที่จะไม่ใช้แอททริบิวต์หัวเรื่องฉันขอแนะนำให้ใช้โซลูชัน CSS บริสุทธิ์เช่น Hint.css หรือตรวจสอบhttp://csstooltip.comซึ่งไม่ต้องการรหัส JavaScript ใด ๆ เลย

— Shital Shah
แหล่งที่มา
ฉันกำลังดิ้นรนกับอันนี้เพราะการสร้างแบบไดนามิกไปลึกหลายระดับ ค่า href เป็นเนื้อหาที่สร้างขึ้นแบบไดนามิกและรหัส div ที่ได้จะขึ้นอยู่กับหมายเลขรายการที่ตรงกับค่า href ดังนั้นถ้าฉันมีหน้าลิงค์ของประเภทรายการ A ฉันมีรายการไอเท็ม a-1 ไอเท็ม a-2 ไอเท็ม a-3 แต่ละลิงก์เหล่านั้นไปยังไอเท็มแต่ละหน้า แต่ฉันต้องการ เนื้อหาเคล็ดลับเครื่องมือเพื่อแสดงเนื้อหาแบบไดนามิกบนโฮเวอร์ดังนั้นผู้ใช้สามารถรับทราบแนวคิดของรายการก่อนคลิกที่ลิงก์แบบเต็ม
— Melanie Sumner
สิ่งนี้มีประโยชน์มากที่สุด ฉันมีคำแนะนำเครื่องมือตั้งค่าให้ผูกกับไอคอนและไลบรารีไอคอนมีการโหลดแบบอะซิงโครนัสบางอย่างดังนั้นจึงไม่สามารถผูกได้ มันแปลกมากเพราะมันจะทำงานเมื่อใช้ตัวเลือกคลาส แต่ไม่ใช่รหัส ขอขอบคุณสำหรับความช่วยเหลือของคุณ!
— Nick Woodhams
14

นี่เป็นวิธีที่ง่ายที่สุด ใส่ก่อนหน้านี้</body>:

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

ตรวจสอบตัวอย่างที่กำหนดในเอกสาร Bootstrap เกี่ยวกับเคล็ดลับ

ตัวอย่างเช่น: 

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>
— Marcos Cassiano
แหล่งที่มา
2
โปรดปิดแอททริบิวต์ประเภท ... การแก้ไขเพียงพิมพ์ผิดคือ PITA: S
— Mohd Abdul Mujib
10

เคล็ดลับเครื่องมือและป๊อปโอเวอร์ไม่ได้เป็นเพียงปลั๊กอิน CSS เช่นเดียวกับแบบเลื่อนลงหรือแถบความคืบหน้า ในการใช้เคล็ดลับเครื่องมือและป๊อปอัพคุณต้องเปิดใช้งานโดยใช้ jquery (อ่านจาวาสคริปต์)

ดังนั้นสมมติว่าเราต้องการให้ป๊อปโอเวอร์ปรากฏเมื่อคลิกปุ่ม html

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

จากนั้นคุณต้องมีรหัสจาวาสคริปต์เพื่อเปิดใช้งาน popover:

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

ที่จริงแล้วโค้ด javascript ด้านบนจะเปิดใช้งาน popover ในองค์ประกอบ html ทั้งหมดที่มีคลาส "popovers-to-be-enabled"

ไม่จำเป็นต้องพูดใส่ javascript ข้างต้นในการโทรกลับ DOM-ready เพื่อเปิดใช้งาน popovers ทั้งหมดทันทีที่ DOM พร้อม

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— Mayank Jaiswal
แหล่งที่มา
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 ล่าสุดคุณไม่ต้องการตัวเลือก jquery ใด ๆ หากคุณใช้ bootstrap 2.0.4 และ jquery-1.7.2.js ล่าสุด

เพียงแค่ใช้ rel="tooltip" title="Your Title" data-placement=" "

ใช้ด้านบน / ล่าง / ซ้าย / ขวาในการจัดวางข้อมูลตามที่คุณต้องการ

— Harish Kumar
แหล่งที่มา
3

ฉันได้เพิ่ม jquery และ bootstrap-tooltip.js ในส่วนหัว การเพิ่มรหัสนี้ในส่วนท้ายทำงานให้ฉัน! แต่เมื่อฉันเพิ่มรหัสเดียวกันในส่วนหัวมันไม่ทำงาน! 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— คาร์ทิค
แหล่งที่มา
3
ในกรณีนี้ DOM ยังไม่ได้โหลดองค์ประกอบทั้งหมดของฉันจึงไม่มีอยู่บนหน้าเว็บ $(function() { ... });
— ล้อม
3

หากใช้ Rails + Haml ง่ายกว่าการรวมคำแนะนำเครื่องมือเพียงทำ:

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

นั่นเป็นเพียงเพิ่มบรรทัดต่อไปนี้ในตอนท้ายขององค์ประกอบ

:rel => "tooltip", :title => "Referential Guide"
— Andres Calle
แหล่งที่มา
หวังอย่างยิ่งว่าจะได้ผลสำหรับฉัน แต่ก็ไม่ได้
— turboladen
ตอนนี้ฉันเป็น Djanto มากกว่า Rails แต่ถ้าคุณวางรหัสของฉันฉันอาจลองให้คำแนะนำกับคุณ
— Andres Calle
3

ในกรณีเฉพาะของฉันมันไม่ทำงานเพราะฉันรวม jQuery สองเวอร์ชัน หนึ่งอันสำหรับ bootstrap แต่อีกอันหนึ่ง (อีกเวอร์ชั่น) สำหรับ Google Charts

เมื่อฉันลบการโหลด jQuery สำหรับแผนภูมิมันก็ใช้ได้ดี

— หิวโหย
แหล่งที่มา
3

ฉันเพิ่งเพิ่ม:

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

ด้านล่าง bootstrap.min.js และใช้งานได้

— Andy.sin
แหล่งที่มา
3

ให้ใช้ตัวอย่างเพื่อแสดงวิธีเพิ่มคำแนะนำเครื่องมือในองค์ประกอบ HTML ใด ๆ ในเอกสารของคุณ

บันทึก:

หากตัวอย่างคำแนะนำเครื่องมือเหล่านี้ไม่ทำงานเมื่อคุณใส่ไว้ในหน้าแสดงว่าคุณมีปัญหาอื่น คุณต้องดูสิ่งต่าง ๆ เช่น:

  • ลำดับของสคริปต์ที่จะถูกรวมไว้
  • ดูว่าคุณพยายามเริ่มองค์ประกอบ HTML ที่ถูกลบไปแล้วหรือไม่
  • ดูว่าคุณพยายามโทรหาวิธีการในไฟล์ JS ที่คุณไม่ได้รวมอยู่

  • ดูว่าคุณกำลังรวมไฟล์ JS ที่มีฟังก์ชันการทำงานที่คุณต้องการ (ไม่เพียง แต่สำหรับคำแนะนำเครื่องมือ แต่เป็นส่วนประกอบใด ๆ ที่คุณใช้บนหน้าเว็บ)

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

ความล้มเหลวของรายการใด ๆ ข้างต้นสามารถ (และบ่อยครั้ง) ป้องกันจาวาสคริปต์จากการโหลดและ / หรือการใช้งานและนั่นทำให้ทุกอย่างดีและเสีย

ตัวอย่างการทำงาน

สมมติว่าคุณมีตราสัญลักษณ์และคุณต้องการให้แสดงคำแนะนำเครื่องมือเมื่อผู้ใช้เลื่อนเมาส์ไป

HTML ดั้งเดิม:

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

เคล็ดลับเครื่องมือ Bootstrap ธรรมดา

หากคุณกำลังสร้างคำแนะนำเครื่องมือสำหรับองค์ประกอบ HTML และคุณใช้คำแนะนำเครื่องมือ Bootstrap ธรรมดาคุณจะต้องรับผิดชอบต่อการเรียกใช้คำแนะนำเครื่องมือเริ่มต้นด้วยรหัส JavaScript ของคุณเอง

ก่อน

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

เคล็ดลับเครื่องมือแม่แบบ Bootstrap (เช่น INSPINIA)

หากคุณใช้เท็มเพลต bootstrap (เช่น INSPINIA) คุณกำลังรวมสคริปต์สนับสนุนเพื่อสนับสนุนคุณลักษณะเทมเพลต:

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

ในกรณีของ INSPINIA สคริปต์ที่รวมไว้จะเริ่มต้นคำแนะนำเครื่องมือทั้งหมดโดยอัตโนมัติโดยเรียกใช้รหัสจาวาสคริปต์ต่อไปนี้เมื่อเอกสารเสร็จสิ้นการโหลด:

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

ด้วยเหตุนี้คุณไม่จำเป็นต้องเริ่มต้นเครื่องมือคำแนะนำสไตล์ INSPINIA ด้วยตนเอง แต่คุณต้องจัดรูปแบบองค์ประกอบของคุณในวิธีเฉพาะ Initializer ค้นหาองค์ประกอบ HTML ที่มี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"a <td>หรือด้านนอกสุด<div><span>หรือ

เคล็ดลับเครื่องมือ Bootstrap ธรรมดาในขณะที่ใช้แม่แบบ

หากคุณใช้ INSPINIA แต่คุณไม่ต้องการเพิ่มส่วนนอก<div>หรือ<span>แท็กเพื่อสร้างคำแนะนำเครื่องมือคุณสามารถใช้คำแนะนำเครื่องมือ Bootstrap มาตรฐานโดยไม่ต้องยุ่งเกี่ยวกับแม่แบบ ในกรณีนี้คุณจะต้องรับผิดชอบต่อการเริ่มต้นเครื่องมือแนะนำตัวเอง อย่างไรก็ตามคุณควรใช้ค่าที่กำหนดเองใน classแอตทริบิวต์เพื่อระบุรายการเคล็ดลับเครื่องมือของคุณ วิธีนี้จะช่วยให้เครื่องมือเริ่มต้น Tooltip ของคุณไม่ทำงานกับองค์ประกอบที่รับผลกระทบจาก INSPINIA ในตัวอย่างของเรามาใช้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>
— Mike Stillion
แหล่งที่มา
2

หากคุณกำลังสร้าง html ที่มีคำแนะนำเครื่องมือด้วย javascript แล้วแทรกลงในเอกสารคุณต้องเปิดใช้งาน popover / tooltip หลังจากที่คุณแทรก html ลงในเอกสารไม่ใช่ในการโหลดเอกสาร ...

— chri_chri
แหล่งที่มา
2

คุณจะต้องวางคำแนะนำจาวาสคริปต์หลังจาก html แบบนี้ :

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

คำแนะนำเครื่องมือไม่ทำงานเนื่องจากคุณวางคำแนะนำเครื่องมือ HTML ไว้หน้า javascriptดังนั้นพวกเขาจึงไม่ทราบว่ามี javascript สำหรับคำแนะนำเครื่องมือหรือไม่ ในความคิดของฉันสคริปต์จะอ่านจากบนลงล่าง

— ซูม
แหล่งที่มา
2

ฉันมีปัญหาที่คล้ายกันและโดยเฉพาะอย่างยิ่งถ้าคุณกำลังทำงานในที่เก็บปุ่มเช่นภาชนะปุ่มแนวตั้ง ในกรณีนั้นคุณต้องตั้งค่าคอนเทนเนอร์เป็น 'เนื้อหา'

I have added a jsfiddle example

ตัวอย่าง

— Shawn Vader
แหล่งที่มา
1

จาก bootstrap เอกสารบนคำแนะนำเครื่องมือ

เคล็ดลับเครื่องมือเลือกใช้ด้วยเหตุผลด้านประสิทธิภาพดังนั้นคุณต้องเริ่มต้นด้วยตนเอง วิธีหนึ่งในการเริ่มต้นเคล็ดลับเครื่องมือทั้งหมดบนหน้าเว็บคือการเลือกโดยใช้แอตทริบิวต์ data-toggle

  $('[data-toggle="tooltip"]').tooltip()
— Rahil Ahmad
แหล่งที่มา
0

เพิ่มdata-toggle="tooltip"องค์ประกอบอะไรก็ได้ที่คุณต้องการด้วยคำแนะนำเครื่องมือ

— Calum Childs
แหล่งที่มา
0

คุณต้องทำดังต่อไปนี้ เพิ่ม

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

รหัสบางแห่งในหน้าของคุณ (โดยเฉพาะอย่างยิ่งใน<head>ส่วน)

เพิ่มdata-toggle: "tooltip"ไปยังทุกสิ่งที่คุณต้องการเปิดใช้งานด้วย

— Calum Childs
แหล่งที่มา
0

คุณสามารถใช้Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

และเรียกใช้ฟังก์ชันคำแนะนำเครื่องมือ:

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});
— Mohsen Newtoa
แหล่งที่มา
-2

ทางเลือกที่รวดเร็วและเบาสำหรับปลั๊กอินคำแนะนำเครื่องมือ Bootstrap:

HTML:

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

CSS:

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

ป้ายกำกับ / ข้อความจะต้องอยู่ใน wrapper ของคลาส "mytooltip" wrapper นี้ต้องมีรหัส

หลังจากเลเบลมีข้อความเคล็ดลับเครื่องมือซึ่งอยู่ใน div ของคลาส "mytooltiptext" และ id ที่ประกอบด้วย id ของ parent wrapper + "_tttext" ตัวเลือกอื่น ๆ สำหรับ selectors สามารถใช้ได้

หวังว่ามันจะช่วย

— jdisla
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.