pcguy
Nov 24, 2014, updated at Dec 05, 2014 (UTC)
view4053
view12
0
Goto Top

Bootstrap tooltipp und modal

GermansolvedQuestionJavaScriptDevelopment
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.
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 255715

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

Printed on: April 26, 2024 at 17:04 o'clock

12 Comments
Latest comment
Goto Top
Member: d4shoerncheN
d4shoerncheN Nov 25, 2014 updated at 08:20:45 (UTC)
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
Member: pcguy
pcguy Nov 25, 2014 at 09:27:36 (UTC)
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 ....
Member: d4shoerncheN
d4shoerncheN Nov 25, 2014 at 10:06:23 (UTC)
Goto Top
Hallo,

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

Gruß
Member: pcguy
pcguy Nov 25, 2014 at 10:44:11 (UTC)
Goto Top
Ich möchte ein Button der beim Hover einen Tooltip anzeigt und beim klick den Modal öffnet ...
Member: d4shoerncheN
d4shoerncheN Nov 26, 2014 updated at 07:21:31 (UTC)
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
Member: pcguy
pcguy Nov 27, 2014 at 11:12:17 (UTC)
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
Member: d4shoerncheN
d4shoerncheN Nov 27, 2014 at 11:31:19 (UTC)
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
Member: pcguy
pcguy Nov 28, 2014 at 10:34:04 (UTC)
Goto Top
Hallo Toni

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

LG
Member: d4shoerncheN
d4shoerncheN Nov 28, 2014 at 10:35:59 (UTC)
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
Member: pcguy
pcguy Nov 29, 2014 at 09:46:29 (UTC)
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
Member: d4shoerncheN
Solution d4shoerncheN Dec 01, 2014, updated at Dec 05, 2014 at 17:45:20 (UTC)
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
Member: pcguy
pcguy Dec 05, 2014 at 17:46:19 (UTC)
Goto Top
hallo Toni

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

Danke!!!
heart1
GermansolvedQuestionJavaScriptDevelopment