pcguy
24.11.2014, aktualisiert am 05.12.2014 um 18:45:20 Uhr
view4177
view12
0
Goto Top

Bootstrap tooltipp und modal

gelöstFrageJavaScriptEntwicklung
Hallo zusammen

Ich versuche Erfolglos des Modal und Tooltip von Bootstrap zu vereinen.


 

<button type="button" class="btn btn-primary btn-xs" data-toggle="modal tooltip" data-placement="auto bottom" data-target=".bs-example-modal-sm" title="Tooltip <br /> links test und so ... ">Kommentar hinzufügen</button>  

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="meinKleinesModalLabel" aria-hidden="true">  
  	<div class="modal-dialog modal-sm">  
    		<div class="modal-content"> test </div>  
  	</div>
</div>

im externen JS:

 
$(function () { $('[data-toggle="popover"]').popover({ html: true, placement: 'right',})	});  
		
$(function () { $('[data-toggle="tooltip"]').tooltip( {html:true} ) 	});  
		
$('#Modal').modal();

Der Tooltipp funktioniert, aber das Modal öffnet nicht?

Danke für eure Feedbacks.
ShareTeilen
Auf Facebook teilen Auf Twitter teilen Auf Reddit teilen Auf Linkedin teilen

Content-ID: 255715

Url: https://administrator.de/contentid/255715

Ausgedruckt am: 21.11.2024 um 23:11 Uhr

12 Kommentare
Neuester Kommentar
Goto Top
d4shoerncheN
d4shoerncheN 25.11.2014 aktualisiert um 09:20:45 Uhr
Goto Top
Guten Morgen,

ich habe gerade leider keine Möglichkeit es zu testen. In deinem JavaScript ist mir aber bei
$('#Modal').modal();
aufgefallen das du die ID "Modal" suchst. Es gibt oben aber keine ID die so heißt, du arbeitest dort nur mit Klassen. Also müsstest du aus deinem # einen . machen. Oder du ersetzt mal Zeile 5 mit folgendem:
<div class="modal fade bs-example-modal-sm" id="Modal" tabindex="-1" role="dialog" aria-labelledby="meinKleinesModalLabel" aria-hidden="true">

Gruß
Toni
pcguy
pcguy 25.11.2014 um 10:27:36 Uhr
Goto Top
Hallo d4shoerncheN, danke für Dein Feedback.
Leider funktioniert beides nicht.


Mit dem originalcode von Bootstrap öffnet das Modal nur für 1s ..... , sobald ich den Tooltip integriere, geht nur noch dieser ....
d4shoerncheN
d4shoerncheN 25.11.2014 um 11:06:23 Uhr
Goto Top
Hallo,

was genau hast du denn vor? Dass der Inhalt vom Modal innerhalb des Tooltips erscheinen soll?

Gruß
pcguy
pcguy 25.11.2014 um 11:44:11 Uhr
Goto Top
Ich möchte ein Button der beim Hover einen Tooltip anzeigt und beim klick den Modal öffnet ...
d4shoerncheN
d4shoerncheN 26.11.2014 aktualisiert um 08:21:31 Uhr
Goto Top
Guten Morgen,

hat ein wenig gedauert aber nun kam ich zum testen.

Dein Button änderst du in (mein Beispiel deinen Bedürfnissen anpassen):
<button type="button" class="btn btn-default" data-toggle="modal" data-tooltip="tooltip" data-placement="right" title="Tooltip on right" data-target="#myModal">Tooltip on right</button>

und als JavaScript fügst du folgendes mit ein:
      
jQuery(function () {
    jQuery('[data-tooltip="tooltip"]').tooltip();  
});

und der Code von Bootstrap für das Modal, aber das weißt du ja.

Gruß
Toni
heart1
pcguy
pcguy 27.11.2014 um 12:12:17 Uhr
Goto Top
1000 Dank Toni!

Nun funktionieret der Tooltip, das Modal aber öffnet nur für 1 sekunde.

Muss ich da noch was ergänzen?

$('#meinModal').modal('show');


liebe Grüsse
d4shoerncheN
d4shoerncheN 27.11.2014 um 12:31:19 Uhr
Goto Top
Hallo,

Fehler kann ich leider nicht reproduzieren. Bei mir bleibt das Modal geöffnet.

Dein JavaScript-Code für das Modal brauchst du nicht, da du das Modal mit data-attributes aufrufst.

Gruß
Toni
pcguy
pcguy 28.11.2014 um 11:34:04 Uhr
Goto Top
Hallo Toni

Ok, könnten den das" jQuery v1.11.1 " ein Problem verursachen?

LG
d4shoerncheN
d4shoerncheN 28.11.2014 um 11:35:59 Uhr
Goto Top
Moin,

poste doch mal deinen gesamten Quelltext hier (auch deine .js). Aber eigentlich nicht. Kannst ja auch mal Version 2.1.1 nutzen.

Gruß
Toni
pcguy
pcguy 29.11.2014 um 10:46:29 Uhr
Goto Top
Hallo


Also Bootstrap v3.3.1 und jQuery v2.1.1 ....


<!-- Button, der das Modal aufruft -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-tooltip="tooltip" data-placement="bottom" title="Tooltip <br> on right" data-target="#meinModal">  
  Modal-Beispiel anzeigen
</button>

<!--<button type="button" class="btn btn-default" data-toggle="modal" data-tooltip="tooltip" data-placement="right" title="Tooltip on right" data-target="#myModal">Tooltip on right</button>  
-->
<!-- Modal -->
<div class="modal fade bs-example-modal-sm" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel" aria-hidden="true">  
  <div class="modal-dialog">  
    <div class="modal-content">  
      <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span></button>  
        <h4 class="modal-title" id="meinModalLabel">Modal-Überschrift</h4>  
      </div>
      <div class="modal-body">  
        ...
      </div>
      <div class="modal-footer">  
        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>  
        <button type="button" class="btn btn-primary">Änderungen speichern</button>  
      </div>
    </div>
  </div>
</div>


Und ein externes JS mit:

/*!
 * Start Bootstrap - Agnecy Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

// jQuery for page scrolling feature - requires jQuery Easing plugin


		//$(function () {
  		//$('[data-toggle="popover"]').popover({ html: true, placement: 'right',})  
		//});
		
		

    	//$(function(){ 
		//   $(".dropdown-toggle").dropdown();  
    	//});  
		
      
		jQuery(function () {
			jQuery('[data-tooltip="tooltip"]').tooltip( {html:true} );	  
			
		});   
		
		
		
   
		

		// https://github.com/dimsemenov/Magnific-Popup
			$('.popup-gallery').magnificPopup({  
				delegate: 'a',  
				type: 'image',  
				tLoading: 'Loading image #%curr%...',  
				mainClass: 'mfp-img-mobile',  
				gallery: {
					enabled: true,
					navigateByImgClick: true,
					preload: [0,1] // Will preload 0 - before current, and 1 after the current image
				},
				image: {
					tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',  
					titleSrc: function(item) {
						return item.el.attr('title') + '<small>© copyright by me</small>';  
					}
				}
			});



liebe Grüsse
d4shoerncheN
Lösung d4shoerncheN 01.12.2014, aktualisiert am 05.12.2014 um 18:45:20 Uhr
Goto Top
Guten Morgen,

schau mal hier. Habe deinen Wunsch mal umgesetzt:
http://livedesign24.de/modal_tooltip.html

Bei mir funktioniert es problemlos, bei dir auch? Hier mein Quelltext komplett:

HTML
<!DOCTYPE html>
<html lang="de">  
    <head>
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <title>Modal und Tooltip - liveDesign24</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">  

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
        <![endif]-->
    </head>
    <body>
        <div class="container">  
            <h1>Modal und Tooltip</h1>

            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-tooltip="tooltip" data-placement="bottom" title="Tooltip <br> on right" data-html="true" data-target="#meinModal">  
                Modal-Beispiel anzeigen
            </button>
            
        </div>

        <!-- Modal -->
        <div class="modal fade bs-example-modal-sm" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel" aria-hidden="true">  
            <div class="modal-dialog">  
                <div class="modal-content">  
                    <div class="modal-header">  
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Schließen</span></button>  
                        <h4 class="modal-title" id="meinModalLabel">Modal-Überschrift</h4>  
                    </div>
                    <div class="modal-body">  
                        ...
                    </div>
                    <div class="modal-footer">  
                        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>  
                        <button type="button" class="btn btn-primary">Änderungen speichern</button>  
                    </div>
                </div>
            </div>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
        <script src="js/modal_tooltip.js"></script>  
    </body>
</html>

JS
jQuery(function () {
    jQuery('[data-tooltip="tooltip"]').tooltip();  
});

Gruß Toni
heart1
pcguy
pcguy 05.12.2014 um 18:46:19 Uhr
Goto Top
hallo Toni

Vielen Dank, nun geht es .... ich weiss nicht warm aber es funktioniert face-smile

Danke!!!
heart1
gelöstFrageJavaScriptEntwicklung
Mehr von pcguypcguyOffice 365 Geräteübergreifende Signaturpcguy - 11 KommentarepcguyIllustrator (EPS in PDF ) ohne ebenen durcheinanderpcguy - 3 KommentarepcguyWin 7 sicherheitseinstellung verhindert allespcguy - 11 KommentarepcguyUST Betrag ausgebenpcguy - 26 Kommentare
Heiß diskutiert
superfun2k24Sophos SFOS 20 DNAT funktioniert nichtsuperfun2k24 - 26 Kommentareuser217Kaufberatung Hardware - Hyper-V Cluster 3 Nodesuser217 - 25 KommentarePharaunIntel-E810 QSFP28 to Mikrotik QSPF+ mit 40Gbit VerbindungPharaun - 23 KommentarecseLaufwege erfassen in großer Hallecse - 20 Kommentareprplemk2Testumgebung bauen (Grundlegend)prplemk2 - 19 KommentareaufdemmarsHP Z620 USB hat kein Strom beim Startenaufdemmars - 17 KommentareYan2021Nachricht an mehrere PCs im Netzwerk sendenYan2021 - 17 KommentareTJ.Hooker74Dom.Admin-Passwort ändern - Auswirkungen auf EX, HCW, AADCTJ.Hooker74 - 14 KommentareJudgelgZertifikate in die Exchange Online GAL hochladenJudgelg - 13 KommentareadmtechEntwicklertagebuch: Release 6.4 - Filteradmtech - 13 KommentaremaisenkaiserSwitch ohne STP ins Netzwerkmaisenkaiser - 13 KommentareleberkaeseFB7590 ISDN Fax-Funktionleberkaese - 12 Kommentare