Top-Themen

Aktuelle Themen (A bis Z)

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

Mitglied: pcguy

pcguy (Level 1) - Jetzt verbinden

24.11.2014, aktualisiert 05.12.2014, 2463 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 ..
Ähnliche Inhalte
JavaScript

Bootstrap 3 - Modaler Dialog aus iFrame öffnen und über das gesamte Browserfenster laden

Frage von AbuJavaScript5 Kommentare

Hallo liebe Freunde, ich habe ein erneutes Bootstrap 3 Problem und benötige noch mal Eure Hilfe. Ich habe eine ...

JavaScript

Bootstrap 3.1.1 - Modal-Dialog (link) öffnet immer mit dem selben Inhalt

gelöst Frage von AbuJavaScript6 Kommentare

Hallo zusammen, ich versuche mich seit einigen Tagen mit Bootstrap und habe mir die Version 3.1.1 heruntergeladen. Nun habe ...

PHP

Wertübergabe Modal

Frage von pcguyPHP3 Kommentare

Hallo zusammen, ich habe folgendes Problem. Über einen Button öffne ich ein Modal (Bootstrap) mit einem Formular. Im Form ...

JavaScript

Twitter Bootstrap

gelöst Frage von pcguyJavaScript4 Kommentare

Hallo zusammen Ich habe eine kleine Javascript Frage. Auf meiner Bootstrap Webseite lade ich am ende das Original javascript: ...

Neue Wissensbeiträge
Windows 10

USB Maus und Tastatur versagen Dienst unter Windows 10

Erfahrungsbericht von hardykopff vor 1 TagWindows 105 Kommentare

Da steht man ziemlich dumm da, wenn der PC sich wegen fehlender USB Tastatur und Maus nicht bedienen lässt. ...

Administrator.de Feedback
Update der Seite: Alles zentriert
Information von Frank vor 1 TagAdministrator.de Feedback18 Kommentare

Hallo User, die größte Änderung von Release 5.8 ist das Zentrieren der Webseite (auf großen Bildschirmen) und ein "Welcome"-Teaser ...

Humor (lol)

WhatsApp-Nachrichten endlich auch per Bluetooth versendbar

Information von BassFishFox vor 1 TagHumor (lol)4 Kommentare

Genau darauf habe ich gewartet! ;-) Der beliebte Messaging-Dienst WhatsApp erhält eine praktische neue Funktion: Ab dem nächsten Update ...

Google Android

Googles "Android Enterprise Recommended" für Unternehmen

Information von kgborn vor 2 TagenGoogle Android3 Kommentare

Hier eine Information, die für Administratoren und Verantwortliche in Unternehmen, die für die Beschaffung und das Rollout von Android-Geräten ...

Heiß diskutierte Inhalte
Windows Netzwerk
WSUS4 und Windows 10 Updates automatisch installieren
Frage von sammy65Windows Netzwerk15 Kommentare

Hallo miteinander, ich habe mit einen neuen WSUS Server aufgesetzt Server 2016 darauf einen aktuellen WSUS. Grund, wir stellen ...

Speicherkarten
Vergessliche USB-Sticks?
Frage von hanheikSpeicherkarten14 Kommentare

Ich habe in den letzten Tagen 500 USB-Sticks mit Bilddateien bespielt. Obwohl ich die Dateien mit größter Sorgfalt kopiert ...

Windows Server
NTFS Berechtigungen Ordnerstruktur
Frage von hukahu23489Windows Server11 Kommentare

Hallo, ich bin seit kurzem in einer neuen IT-Abteilung und bin über das Berechtigungskonzept des Unternehmens sehr schockiert. Ich ...

Hyper-V
Hyper-V mit altem XEON-Server. Was ist falsch?
Frage von LollipopHyper-V11 Kommentare

Hallo Bin etwas frustriert. Kleinbetrieb, ca. 15 PC's, 2 Stk. Server mit einigen virtuellen PC's für Fernwartung, VaultServer für ...