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

Frage Entwicklung JavaScript

Mitglied: pcguy

pcguy (Level 1) - Jetzt verbinden

24.11.2014, aktualisiert 05.12.2014, 2395 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
Batch & Shell

Open Object Rexx: Eine mittlerweile fast vergessene Skriptsprache aus dem Mainframebereich

Information von Penny.Cilin vor 1 StundeBatch & Shell1 Kommentar

Ich kann mich noch sehr gut an diese Skriptsprache erinnern und nutze diese auch heute ab und an noch. ...

Humor (lol)

"gimme gimme gimme": Automatischer Test stolpert über Easter Egg im man-Tool

Information von Penny.Cilin vor 3 StundenHumor (lol)5 Kommentare

Interessant, was man so alles als Easter Egg implementiert. Ist schon wieder Ostern? "gimme gimme gimme": Automatischer Test stolpert ...

MikroTik RouterOS

Mikrotik - Lets Encrypt Zertifikate mit MetaROUTER Instanz auf dem Router erzeugen

Anleitung von colinardo vor 18 StundenMikroTik RouterOS8 Kommentare

Einleitung Folgende Anleitung ist aus der Lage heraus entstanden das ein Kunde auf seinem Mikrotik sein Hotspot Captive Portal ...

Sicherheit

Sicherheitslücke in HP-Druckern - Firmware-Updates stehen bereit

Information von BassFishFox vor 19 StundenSicherheit1 Kommentar

Ein weiterer Grund, dass Drucker keinerlei Verbindung nach "auswaerts" haben sollen. Unter Verwendung spezieller Malware können Angreifer aus der ...

Heiß diskutierte Inhalte
Windows Server
RDP macht Server schneller???
Frage von JaniDJWindows Server17 Kommentare

Hallo Community, wir betrieben seit geraumer Zeit diverse virtuelle Maschinen und Server mit Windows Server 2012. Leider haben wir ...

Windows 10
Windows 10 dunkler Bildschirm nach Umfallen
Frage von AkcentWindows 1015 Kommentare

Hallo, habe hier einen Windows 10 Rechner der von einem User umgefallen wurde (Beine übers Knie, an den PC ...

Linux
OpenSource Groupware
Frage von FA-jkaLinux13 Kommentare

Hallo, ich suche eine Groupware als Alternative zum Exchange. Wesentliche Aufgaben sind die Handhabung von E-Mails (persönliche und gemeinsam ...

Windows 10
Bitlocker nach Verschlüsselung nicht mehr aufrufbar!
gelöst Frage von alexlazaWindows 1013 Kommentare

Hallo, ich besitze ein HP ZBook 17 G4 mit einem Windows 10 Pro Betriebssystem. Bei diesem Problem handelt sich, ...