All geek questions in one place

Positioning tooltips in the right place with css

I am trying to correctly adjust the position of the help window so that it always shows the following:

Position i want

I mean, the pointer is only in the "help circle". But I have setup problems. Vertically, this is normal, but I can’t adjust it horizontally. Here I leave the JS Fiddle URL:

https://jsfiddle.net/28dsnmxs/2/

As you can see, the help window is completely confused, not where it should be. I want to fix it.

.help-tip {
  display: inline-block;
  position: static;
  text-align: center;
  background-color: #BCDBEA;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 26px;
  cursor: default;
}
.help-tip:before {
  content: '?';
  font-weight: bold;
  color: #fff;
}
.help-tip:hover p {
  display: block;
  transform-origin: 100% 0%;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  animation: fadeIn 0.3s ease-in-out;
}
.help-tip p {
  /* The tooltip */
  display: none;
  text-align: left;
  background-color: #1E2021;
  padding: 10px;
  width: 200px;
  position: absolute;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  color: #FFF;
  font-size: 13px;
  line-height: 1.4;
}
.help-tip p:before {
  /* The pointer of the tooltip */
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: #1E2021;
  right: 63px;
  top: -12px;
}
.help-tip p:after {
  /* Prevents the tooltip from being hidden */
  width: 100%;
  height: 40px;
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
}
/* CSS animation */

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 100%;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}
<div class="help-tip">
  <p>Formato: nombre@dominio.com</p>
</div>
Run codeHide result
+4
source share
2 answers

You can use position:relativefor the parent and use the coordinates rightto set the arrow wherever you want.

overflow .

https://jsfiddle.net/28dsnmxs/4/

*{
	margin:0px;
	padding:0px;
	font-family: Tahoma;
	font-weight: lighter;
}

img{
    display: block;
    margin: auto;
	margin-top: 10px;
}

body{
	background-color: #E0ECF8;
}

section#formulario{/* removed overflow:hidden */
	width:400px;
	min-height: 100px;
	background-color: white;
	border-radius: 5px;
	margin: 0 auto;
	margin-top:20px;
	margin-bottom:20px;
}

section#formulariorespuestas{
	width:600px;
	min-height: 100px;
	background-color: white;
	overflow: hidden;
	border-radius: 5px;
	margin: 0 auto;
	margin-top:20px;
	padding-right: 30px;
	padding-bottom: 20px;	
}

p#titulo{
	font-size: 1.6em;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

p#dato{
	font-size: 1em;
	margin-left: 40px;
	}

p#opcionesenvio{
	font-size: 1.6em;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;	
}

p#questions{
	font-size: 1em;
	margin-top: 10px;
	margin-left: 20px;
	text-align: left;
}

input[type="text"], input[type="password"], input[type="mail"], input[type="birth"], input[type="dni"]{
	width: 335px;
	height: 35px;
	margin-left: 20px;
	margin-top:10px;
	padding-left: 10px;
	font-size: 1.1em;
	outline: none;
	border:0px;
	background-color: #dcdcdc;
	border-radius: 5px;
}

textarea{
	width: 335px;
	margin-left: 0px;
	margin-top:10px;
	padding-left: 10px;
	font-size: 1em;
	outline: none;
	border:0px;
	background-color: #dcdcdc;
	border-radius: 5px;
}

#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
}


input[type="submit"]{
	margin:20px;
	margin-bottom: 20px;
	width:157px;
	height: 40px;
	outline: none;
	border:0px;
	background-color: #75b6dc;
	color: white;
	font-size: 1.2em;
	border-radius: 5px;
	-webkit-box-shadow:0px 5px 0px #659dbf;

}

input[type="reset"]{
	margin:20px;
	margin-bottom: 20px;
	width:157px;
	height: 40px;
	outline: none;
	border:0px;
	background-color: #585858;
	color: white;
	font-size: 1.2em;
	border-radius: 5px;
	-webkit-box-shadow:0px 5px 0px #424242;

}

span.negrita{
	font-weight: bold;
}

.help-tip{
  position:relative;/* added instead static */
	display: inline-block;
	text-align: center;
	background-color: #BCDBEA;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 26px;
	cursor: default;
} 

.help-tip:before{
	content:'?'; 
	font-weight: bold;
	color:#fff;
}

.help-tip:hover p{
	display:block;
	transform-origin: 100% 0%;

	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{	/* The tooltip */
	display: none;
	text-align: left;
	background-color: #1E2021;
	padding: 10px;
	width: 200px;
	position: absolute;
  z-index:1;/* added */
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
  right:-58px;/* added */
}

.help-tip p:before{ /* The pointer of the tooltip */
	position: absolute;
	content: '';
	width:0;
	height: 0;
	border:6px solid transparent;
	border-bottom-color:#1E2021;
	right:63px;
	top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
	width:100%;
	height:40px;
	content:'';
	position: absolute;
	top:-40px;
	left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
	0% { 
		opacity:0; 
		transform: scale(0.6);
	}

	100% {
		opacity:100%;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity:100%; }
}
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Formulario de registro</title>
	<link rel="stylesheet" href="p1.css">
<script type="text/javaScript" src="p1.js"> </script>
</head>
<body>
	<section id="formulario">
		<p id="titulo">Formulario de registro</p>

		<form method="POST" action="" name="formulario" id="form" onsubmit="return checkForm(this);">
			<input type="text" id="nombre" name="nombre" placeholder="Nombre">
			<input type="text" id="apellidos" name="apellidos" placeholder="Apellidos">
			<input type="text" id="birth" name="birth" placeholder="Fecha de nacimiento">
			<div class="help-tip"><p>Formato: DD/MM/YYYY</p></div>
			<input type="text" id="dni" name="dni" placeholder="DNI">
			<div class="help-tip"><p>Formato ejemplo: 99999999L</p></div>
			<input type="text" id="telephone" name="telephone" placeholder="Tel&eacute;fono">
			<div class="help-tip"><p>Formato ejemplo: 887889781</p></div>
			<input type="mail" id="mail" name="mail" placeholder="Correo electr&oacute;nico">
			<div class="help-tip"><p>Formato: nombre@dominio.com</p></div>
			<input type="password" id="pass" name="pwd1" placeholder="Contrase&ntilde;a">
			<div class="help-tip"><p>Mínimo 6 caracteres. Debe contener al menos una letra mayúscula y un número.</p></div>
			<input type="password" id="pass" name="pwd2" placeholder="Confirmar contrase&ntilde;a">
			<p id="questions">¿Cuáles fueron sus estudios anteriores?<br>
			<select name="studieslist" form="form">
				<option value="bach">Bachillerato</option>
				<option value="ciclo">Ciclo Superior</option>
				<option value="extra">Estudios en el extranjero</option>
			</select>
			<p id="questions">¿Desea recibir comunicaciones por parte de la Universidad de Vigo?<br>
			<input type="checkbox" name="h[]" value="1" id="g"> SMS
			<br/>
			<input type="checkbox" name="h[]" value="2" id="g"> Correo electrónico
			<br/>
			<input type="checkbox" name="h[]" value="3" id="g"> Teléfono
			<br/>
			<input type="button" id="prueba" name="sub" value="Marcar todas" onclick="checkall(document.formulario.h)">
			<input type="button" name="sub" value="Desmarcar todas" onclick="uncheckall(document.formulario.h)">
			<p id="questions">¿Desea activar el servicio de "Notas al móvil"?<br>
			<input type="radio" name="mobilegrade" value="yes" checked="checked"> Sí<br>
			<input type="radio" name="mobilegrade" value="no"> No</p>
			<p id="questions">Escriba aquí cualquier información adicional que desee adjuntar con el formulario:<br>
			<textarea name="comment" form="form" placeholder="Información adicional..." rows="4" cols="50"></textarea></p>
			<div id="outer">
			<p id="opcionesenvio">Opciones de envío</p>
			<p id="questions">Tipo de codificación:<br>
			<input type="radio" name="codification" value="urlencoded" checked="checked"> application/x-www-form-urlencoded<br>
			<input type="radio" name="codification" value="multipart"> multipart/form-data</p>
			<p id="questions">Método de envío:<br>
			<input type="radio" name="sendmethod" value="GET"> GET<br>
			<input type="radio" name="sendmethod" value="POST" checked="checked"> POST</p>
			<p id="questions">Enviar a:<br>
			<input type="radio" name="sendto" value="myphp" checked="checked"> Fichero PHP (p1.php)<br>
			<input type="radio" name="sendto" value="sintprofphp"> URL "/~sint0/p1.php"</p>
			<input type="hidden" name="navegador"/>
			<input type="hidden" name="hora"/>
			<div class="inner"><input type="submit" value="enviar"></div>
			<div class="inner"><input type="reset" value="limpiar"></div>
			</div>
		</form>
	</section>
</body>
</html>
Hide result
+7

css, plz . css changes OR Fiddle -

section#formulario {
    width: 400px;
    min-height: 100px;
    background-color: white;
    /* overflow: hidden; */  /* removed */
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.help-tip {
    display: inline-block;
    position: relative; /* modified */
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip p {
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 10px;
    width: 200px;
    top: 25px;     /* added */
    right: -57px;  /* added */
    z-index: 999;  /* added */
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

-

https://jsfiddle.net/guruling/u5r9xrbd/
+1

Source: https://habr.com/ru/post/1656858/

More articles:


All Articles