I am trying to create a tooltip with buttons (Just like LinkedIn) for example.
This is what I have tried so far: (but stuck from here)
.tooltip{
display: inline;
color:black;
position: relative;
top:200px;
}
.tooltip:hover:after{
background: grey;
border-radius: 5px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
top: -53px;
width: 163px;
}
.tooltip:hover:before{
border:solid;
border-color: #333 transparent;
border-width: 6px 6px 0px 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span title="More">Linkedin Profile</span>
</body>
</html>
Issue:
But, I'm not able to figure out how to add <buttons> and also image to the tooltip?
How does the solution formulate for HTML/CSS/JS and HTML/CSS only?
Expected output:
Thank you
I would suggest to use Bootstrap popover as it is more flexible. See bootstrap documentation for popover here
Here is a simple example on how to use it FIDDLE
HTML
<div class="container">
<h3>Bootstrap 3 Popover HTML Example</h3>
<span data-placement="bottom" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login" class="btn btn-default" >Click me</span>
<div id="popover-content" class="hide">
<div class="row">
<div class="col-xs-4">
<img width="88px" height="88px"src="https://pbs.twimg.com/profile_images/816404989392211968/Wv_8ZDrX_400x400.jpg"/>
</div>
<div class="col-xs-8">
<h4>
Justin Trudeau <br/>
<small>
Prime minister of Canada
</small>
</h4>
<button class="btn btn-sm btn-primary">
Follow
</button>
<button class="btn btn-sm btn-default">
View profile
</button>
</div>
</div>
</div>
JAVASCRIPT
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
Related
enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.
Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>
folks!
Me might be stupid, but i cant get working video popUp box.
Okay, let's start from beginning. I have 3D style image carousel gallery with button and title in it. I have edited this (important) - "button" to tens of times to get it working, but still no results. It feels like the current 3D CSS, JQuery, Javascript and HTML image slider gallery doesn't work together with Video popUp box. I`m not sure, but it feels like. The working popUp video sample (demo) is here and I would like it to get this done combined with my 3D carousel(slider) image gallery. When I put few script lines from working sample to the gallery page i got no response from the script lines. Like the 3D gallery blocked the popUp video box and it does not show up.
My goal : I want to get popUp video box over the 3D image gallery slider.
Problem : PopUp box doesn't respond (not working), it is not displayed over the 3D gallery slider, after button (Watch movie) click.
Here it is the full code of 3D carousel image gallery and working popUp video box. To make it easier for you i put all the source links for this script sample, so you can just create your own index.html file with this script.
<html>
<head>
<meta charset="UTF-8">
<title>3D Smooth Carousel - Slider</title>
<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://kinobalss.lv/3d/css/style.css">
<style type="text/css">
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.popuptext {
display: none;
}
.mfp-hide {
display: none !important;
}
.button {
padding: 20px 40px;
border-color: #f3f3f3;
font-size: 17px;
font-size: 1.7rem;
font-family: "museo-sans", Arial, Verdana;
font-weight: 500;
margin-top: 40px;
display: inline-block;
}
.button {
border: 2px solid #fcf;
color: #000;
text-transform: uppercase;
transition: all 0.15s ease-in-out;
}
.button .fa {
margin-left: 20px;
}
.button:hover {
background-color: #07d;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.content {
text-align: center;
}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
$('#videoLink')
.magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
})
}
//]]></script>
</head>
<body>
<div class="slider-container" id="slider">
<div class="slider-content">
<div class="slider-single">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="1" />
<a class="slider-single-download" href="#videoStory" id="videoLink">Watch movie <i class="fa fa-play-circle" aria-hidden="true"></i></a>
<div id="videoStory" class="mfp-hide" style="max-width: 75%; margin: 0 auto;"><iframe width="853" height="480" src="https://www.kinobalss.lv/media/tvantena.mp4" frameborder="0" allowfullscreen=""></iframe>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>311,247</p>
</a>
</div>
<!--- Down below is only other 3D carousel image slider script lines. Those are not immportant. I`m working on this the first image from slider gallery, sample Above. Rest of these lines are because of full page script. //-->
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="2" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-play-circle"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="3" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="4" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="5" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
<div class="slider-single">
<img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="6" />
<a class="slider-single-download" href="javascript:void(0);">Skatīties filmu <i class="fa fa-download"></i></a>
<h1 class="slider-single-title">Through the Mountains</h1>
<a class="slider-single-likes" href="javascript:void(0);">
<i class="fa fa-heart"></i>
<p>1,247</p>
</a>
</div>
</div>
<a class="slider-left" href="javascript:void(0);"><i class="fa fa-arrow-left"></i></a>
<a class="slider-right" href="javascript:void(0);"><i class="fa fa-arrow-right"></i></a>
</div>
<script src="https://kinobalss.lv/3d/js/index.js"></script>
</body>
</html>
I want the header of the Modal to be fixed as the modal is scrolled, but position:fixed; is not working. I am using Materialize CSS for the modal construction. But position:sticky is working.
$(document).ready(()=>{
$('#missionModal').modal();
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="">
<div style="position:fixed;width: 100%;top:0px;left:0px;height:100px;background-color:#0a2701">
</div>
<div style="margin-top:100px;height:550px">
<p>This ois naven don</p>
</div>
</div>
<div style="position: absolute;width: 100%;bottom:0px;left:0px;" class="modal-footer">
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>
Maybe try this one. I reconstructed your HTML and CSS code:
Just identify which is your header and give a fixed height on your modal body to be scrollable. And, materialize css has a default overflow-y: auto I just give it initial so that the whole modal will be not scrollable.
Please take a look at my code:
$(document).ready(()=>{
$('#missionModal').modal();
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.modal {
overflow: initial !important;
}
.modal-header {
height: 100px;
background: #0a2701;
font-size: 40px;
padding: 20px;
color: #ffffff;
}
.modal-body {
overflow-y: auto;
height: 120px;
background: #fff;
}
.modal-body div {
height:550px
}
.modal-close {
float: right;
display: inline-block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="modal-header">This is a header.</div>
<div class="modal-body">
<div>
<p>This ois naven don</p>
</div>
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>
I'm running into a small problem.
I want to display 3 houses and when you hover over them with your mouse it displays tooltip text. This is what I got so far. It runs fine as you can see, but when adding a style sheet it is interfering and deleting the houses and the tooltip text :
<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 110%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.linkhome {
display: inline-block;
font-size: 2.25rem;
padding-left: 10px;
padding-right: 10px;
}
.linkhome :hover {
color:#23739b;
transition: color 0.3s ease-in-out;
}
.links {
}
</style>
<body>
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="links">
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Homepage</span>
</div>
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Tooltip text</span>
</div>
<div class="tooltip"><div class="linkhome">
<a href="https://bitcoin.org/" target="_blank" title="Official website">
<i class="fas fa-home"></i>
</a>
</div>
<span class="tooltiptext">Tooltip text</span>
</div>
</div>
</body>
</html>
But when I add this in the head-tag:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
crossorigin="anonymous">
The houses with the toolbelt disapears, Is there any reason to fix this problem?
Thanks for reading this post, I hope some can help me or give me a suggestion.
I would suggest you please use bootstrap4 tooltip
Please try below solution.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<body>
<h2>Bottom Tooltip w/ Top Arrow</h2>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">
<i class="fas fa-home"></i>
</a>
</body>
</html>
I made a html page using some simple bootstrap and have it linked to a database using some php. I want the page to be simple at the beginning, only 2 sections, and as you complete the inputs and press next, another section becomes visible. I tried doing this with a toggle visibility in javascript but for some reason it either doesn't switch between the display: none or block, doesn't take on the inputs or just simply does nothing.
Below is 2 sections, if anyone can explain why and how this does not work.
/*Contect style*/
input,
textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/*sections*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
display: none;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
display: none;
}
.reservation-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
display: none;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: left;
background: #fff;
}
<?php $servername="localhost" ; $username="root" ; $password="" ; // Create connection $conn=n ew mysqli($servername, $username, $password); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $conn->select_db("airports"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="scrolling-nav.css" rel="stylesheet" type="text/css" />
<link href="contactStyle.css" rel="stylesheet" type="text/css" />
<script src="paymentFormJS.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title>Licenta - Rezervare bilete de avion</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#reservation">Reservation</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>-->
<!-- Intro Section -->
<section id="intro" class="intro-section section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div style="height: 50px"></div>
<h1>Tells us what you want!</h1>
<div style="height: 100px;"></div>
<form role="form">
<div class="form-group col-xs-6">
<h3><label for="departure">Where will you be leaving from</label></h3>
<input class="form-control input-lg" id="departure" type="text" placeholder="Madrid, Spain" name="source">
</div>
<div class="form-group col-xs-6">
<h3><label for="arrival">Where you will arrive to</label></h3>
<input class="form-control input-lg" id="arrival" type="text" placeholder="Bucharest, Romania" name="destination">
</div>
<div class="form-group col-xs-4" style="margin-left: 33%; margin-top: 100px;">
<button type="submit" class="btn btn-info btn-lg btn-block" name="city_search" id="aboutBtn" onclick="toggle_visibility('about')">
<a class="page-scroll-about" href="#about" style="text-decoration: none; color: #ffffff;"> Find it </a>
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container" style="">
<div class="row">
<div class="col-lg-12">
<h1>Pick a flight</h1>
<div style="height: 50px;"></div>
<form role="form">
<?php if(isset($_GET[ "city_search"])) { $src=$ _GET[ "source"]; $dest=$ _GET[ "destination"]; $query_txt="SELECT * FROM flights WHERE source_city LIKE '%{$src}%' AND destination_city LIKE '%{$dest}%'" ; if($qu=$ conn->query($query_txt)) { while($row = $qu->fetch_row()) { echo "
<div class=\ "form-group col-xs-12\" style=\ "border: 1px solid black; height: auto\">"; echo "
<div class=\ " col-lg-6\" style=\ "border-right: 1px solid black; height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo "
<p style=\ " margin-top: 25px;\">{$row[1]}</p>"; echo "</div>"; echo "
<div class=\ " col-lg-6\" style=\ " height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo "
<p style=\ " margin-top: 25px;\">{$row[2]}</p>"; echo "</div>"; echo "
<button type=\ "submit\" class=\ "btn btn-primary btn-sm \" name=\ "flight_id\" value=\ "{$row[0]}\" id=\ "submitBtn{$row[0]}\" style=\ " margin-top: 15px; margin-bottom: 15px;\" onclick=\
"toggle_visibility('services')\"><a class=\ "page-scroll\" href=\ "#services\" style=\ "text-decoration: none; color: #ffffff;\">Pick a flight</a>
</button>"; echo "</div>"; } } } ?>
</form>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Tell us about you</h1>
<form class="form-horizontal col-lg-6" role="form" style="margin-left: 23%;">
<div class="form-group">
<label for="inputdefault">Name</label>
<input class="form-control" id="inputdefault" type="text" placeholder="John" style="text-align: center;" name="client_name">
</div>
<div class="form-group">
<label for="inputdefault">Surname</label>
<input class="form-control" id="inputdefault" type="text" placeholder="Doe" style="text-align: center;" name="client_surname">
</div>
<div class="form-group">
<label for="inputdefault">ID</label>
<input class="form-control" id="inputdefault" type="text" placeholder="1770423112233" style="text-align: center;" name="client_id">
</div>
<div class="form-group">
<label for="inputdefault">Age</label>
<input class="form-control" id="inputdefault" type="text" placeholder="27" style="text-align: center;" name="client_age">
</div>
<div class="form-group">
<label for="inputdefault">Address</label>
<input class="form-control" id="inputdefault" type="text" placeholder="Bd. Unirii nr. 144" style="text-align: center;" name="client_address">
</div>
<div class="form-group col-xs-3" style="margin-left: 80%; margin-top: 15px;">
<button type="submit" class="btn btn-info btn-lg btn-block" name="client_flight_id" value="<?php
if(isset($_GET[" flight_id "]))
echo $_GET["flight_id "];
else
echo "nullb ";
?>" id="reservationBtn" onclick="toggle_visibility('reservation')">
<a class="page-scroll" href="#reservation" style="text-decoration: none; color: #ffffff;" onclick="toggle_visibility('reservation')"><span class="glyphicon glyphicon-search"></span> Neext </a>
</button>
<?php if(isset($_GET[ "client_flight_id"])) { $client_name=$ _GET[ "client_name"]; $client_surname=$ _GET[ "client_surname"]; $client_id=$ _GET[ "client_id"]; $client_age=$ _GET[ "client_age"]; $client_address=$ _GET[ "client_address"]; $client_flight_id=$
_GET[ "client_flight_id"]; $query_txt="INSERT INTO clients (name, surname, client_id, age, address, flight_id) VALUES (\" {$client_name}\ ",\"{$client_surname}\ ", {$client_id}, {$client_age}, \"{$client_address}\
", {$client_flight_id})"; $conn->query($query_txt); $client_db_id = $conn->insert_id; } ?>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
Thanks in advance to anyone who answers.
Just tested your code and moving the script in the bottom of the page seemed to fix the problem. If you are using Google Chrome always check your console (Ctrl + Shift + i) when you are messing with Javascript.
And Javascript that makes DOM manipulation should be loaded at the end of the page after all elements are loaded or using load event must in order to execute the code after the elements are loaded.