Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Bootstrap tooltipp und modal

Frage Entwicklung JavaScript

Mitglied: pcguy

pcguy (Level 1) - Jetzt verbinden

24.11.2014, aktualisiert 05.12.2014, 2089 Aufrufe, 12 Kommentare, 3 Danke

Hallo zusammen

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


01.
  
02.
 
03.
<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> 
04.
 
05.
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="meinKleinesModalLabel" aria-hidden="true"> 
06.
  	<div class="modal-dialog modal-sm"> 
07.
    		<div class="modal-content"> test </div> 
08.
  	</div> 
09.
</div> 
10.
 
im externen JS:

01.
  
02.
$(function () { $('[data-toggle="popover"]').popover({ html: true, placement: 'right',})	}); 
03.
		 
04.
$(function () { $('[data-toggle="tooltip"]').tooltip( {html:true} ) 	}); 
05.
		 
06.
$('#Modal').modal(); 
07.
 
Der Tooltipp funktioniert, aber das Modal öffnet nicht?

Danke für eure Feedbacks.
Mitglied: d4shoerncheN
25.11.2014, aktualisiert um 09:20 Uhr
Guten Morgen,

ich habe gerade leider keine Möglichkeit es zu testen. In deinem JavaScript ist mir aber bei
01.
$('#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:
01.
<div class="modal fade bs-example-modal-sm" id="Modal" tabindex="-1" role="dialog" aria-labelledby="meinKleinesModalLabel" aria-hidden="true">
Gruß
Toni
Bitte warten ..
Mitglied: pcguy
25.11.2014 um 10:27 Uhr
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 ....
Bitte warten ..
Mitglied: d4shoerncheN
25.11.2014 um 11:06 Uhr
Hallo,

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

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

hat ein wenig gedauert aber nun kam ich zum testen.

Dein Button änderst du in (mein Beispiel deinen Bedürfnissen anpassen):
01.
<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:
01.
       
02.
jQuery(function () { 
03.
    jQuery('[data-tooltip="tooltip"]').tooltip(); 
04.
});   
und der Code von Bootstrap für das Modal, aber das weißt du ja.

Gruß
Toni
Bitte warten ..
Mitglied: pcguy
27.11.2014 um 12:12 Uhr
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
Bitte warten ..
Mitglied: d4shoerncheN
27.11.2014 um 12:31 Uhr
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
Bitte warten ..
Mitglied: pcguy
28.11.2014 um 11:34 Uhr
Hallo Toni

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

LG
Bitte warten ..
Mitglied: d4shoerncheN
28.11.2014 um 11:35 Uhr
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
Bitte warten ..
Mitglied: pcguy
29.11.2014 um 10:46 Uhr
Hallo


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


01.
 
02.
<!-- Button, der das Modal aufruft --> 
03.
<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"> 
04.
  Modal-Beispiel anzeigen 
05.
</button> 
06.
 
07.
<!--<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>  
08.
--> 
09.
<!-- Modal --> 
10.
<div class="modal fade bs-example-modal-sm" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel" aria-hidden="true"> 
11.
  <div class="modal-dialog"> 
12.
    <div class="modal-content"> 
13.
      <div class="modal-header"> 
14.
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span></button> 
15.
        <h4 class="modal-title" id="meinModalLabel">Modal-Überschrift</h4> 
16.
      </div> 
17.
      <div class="modal-body"> 
18.
        ... 
19.
      </div> 
20.
      <div class="modal-footer"> 
21.
        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button> 
22.
        <button type="button" class="btn btn-primary">Änderungen speichern</button> 
23.
      </div> 
24.
    </div> 
25.
  </div> 
26.
</div> 
27.
    

Und ein externes JS mit:

01.
 
02.
/*! 
03.
 * Start Bootstrap - Agnecy Bootstrap Theme (http://startbootstrap.com) 
04.
 * Code licensed under the Apache License v2.0. 
05.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0. 
06.
 */ 
07.
 
08.
// jQuery for page scrolling feature - requires jQuery Easing plugin 
09.
 
10.
 
11.
		//$(function () { 
12.
  		//$('[data-toggle="popover"]').popover({ html: true, placement: 'right',}) 
13.
		//}); 
14.
		 
15.
		 
16.
 
17.
    	//$(function(){  
18.
		//   $(".dropdown-toggle").dropdown(); 
19.
    	//});   
20.
		 
21.
       
22.
		jQuery(function () { 
23.
			jQuery('[data-tooltip="tooltip"]').tooltip( {html:true} );	 
24.
			 
25.
		});    
26.
		 
27.
		 
28.
		 
29.
    
30.
		 
31.
 
32.
		// https://github.com/dimsemenov/Magnific-Popup 
33.
			$('.popup-gallery').magnificPopup({ 
34.
				delegate: 'a', 
35.
				type: 'image', 
36.
				tLoading: 'Loading image #%curr%...', 
37.
				mainClass: 'mfp-img-mobile', 
38.
				gallery: { 
39.
					enabled: true, 
40.
					navigateByImgClick: true, 
41.
					preload: [0,1] // Will preload 0 - before current, and 1 after the current image 
42.
				}, 
43.
				image: { 
44.
					tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', 
45.
					titleSrc: function(item) { 
46.
						return item.el.attr('title') + '<small>© copyright by me</small>'; 
47.
48.
49.
			}); 
50.
			



liebe Grüsse
Bitte warten ..
Mitglied: d4shoerncheN
LÖSUNG 01.12.2014, aktualisiert 05.12.2014
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
01.
<!DOCTYPE html> 
02.
<html lang="de"> 
03.
    <head> 
04.
        <meta charset="utf-8"> 
05.
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
06.
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
07.
        <title>Modal und Tooltip - liveDesign24</title> 
08.
 
09.
        <!-- Bootstrap --> 
10.
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
11.
 
12.
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
13.
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
14.
        <!--[if lt IE 9]> 
15.
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
16.
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
17.
        <![endif]--> 
18.
    </head> 
19.
    <body> 
20.
        <div class="container"> 
21.
            <h1>Modal und Tooltip</h1> 
22.
 
23.
            <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"> 
24.
                Modal-Beispiel anzeigen 
25.
            </button> 
26.
             
27.
        </div> 
28.
 
29.
        <!-- Modal --> 
30.
        <div class="modal fade bs-example-modal-sm" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel" aria-hidden="true"> 
31.
            <div class="modal-dialog"> 
32.
                <div class="modal-content"> 
33.
                    <div class="modal-header"> 
34.
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Schließen</span></button> 
35.
                        <h4 class="modal-title" id="meinModalLabel">Modal-Überschrift</h4> 
36.
                    </div> 
37.
                    <div class="modal-body"> 
38.
                        ... 
39.
                    </div> 
40.
                    <div class="modal-footer"> 
41.
                        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button> 
42.
                        <button type="button" class="btn btn-primary">Änderungen speichern</button> 
43.
                    </div> 
44.
                </div> 
45.
            </div> 
46.
        </div> 
47.
 
48.
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
49.
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
50.
        <!-- Include all compiled plugins (below), or include individual files as needed --> 
51.
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
52.
        <script src="js/modal_tooltip.js"></script> 
53.
    </body> 
54.
</html>
JS
01.
jQuery(function () { 
02.
    jQuery('[data-tooltip="tooltip"]').tooltip(); 
03.
});   
Gruß Toni
Bitte warten ..
Mitglied: pcguy
05.12.2014 um 18:46 Uhr
hallo Toni

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

Danke!!!
Bitte warten ..
Neuester Wissensbeitrag
Heiß diskutierte Inhalte
Windows Userverwaltung
Ausgeschiedene Mitarbeiter im Unternehmen - was tun mit den AD Konten? (33)

Frage von patz223 zum Thema Windows Userverwaltung ...

LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (21)

Frage von DavidGl zum Thema LAN, WAN, Wireless ...

Viren und Trojaner
Aufgepasst: Neue Ransomware Goldeneye verbreitet sich rasant (20)

Link von Penny.Cilin zum Thema Viren und Trojaner ...