Burbujas para tooltip, súper fácil!

**Hectorsito20** · 28-abr-2013

Saludos para todos, codeando me enteré de que hacer burbujas para tu tooltips ó lo que desees en tu sitio web es más fácil de lo que parece, empecemos..

Obviamente lo primero es nuestro html, como en todo proyecto

Código:

<!doctype html>

<html lang="es">
<head>
	<title>Practica Javascript</title>
	<meta charset="uft-8">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>

	<div id="container">
		<div class="content">
			<div class="avatar">
			</div>
			<h3>James Poetrodriguez</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
			<div class="triangle"></div>
		</div>
	</div>

</body>
</html>

Ojo, si estás siguiendo éste tutorial creo que no es necesario la explicación del html, pero por si acaso una pequeña expliación de lo que es el HTML para éste ejemplo:

Lo primero que hicismo fué crear una etiquta DIV para el contenedor de nuestro ejemplo en mi caso la llamé (container) antesediendole una almoadilla para poder llamarla desde los estilos CSS.

después creo otro DIV para el content interno é hijo de container.
OJO, el nombre es indiferente ya que cada quien puede nombrarla cómo deseen..

bueno y asi sucesivamente con los demás, todo va a depender de lo que queramos hacer obviamente aqui ya es cuestión de imaginación y creatividad de cada quien.

Ahora si... ya creo que tenemos que entrar en materia.. bueno para empezar tenemos que aplicar algunas propiedades básica al body, (no se preocupen nada del otro mundo), son propiedades cómo margin, padding, font.-family, etc...

seguido de ésto vamos al construir lo que venimos hacer aqui, una burbuja con css básico.

este es el códido:

Código:

body {
			font-family: 'Open Sans', sans-serif;
			margin: 0;
			padding: 0;
			background: #666;
		}

		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
		}

		#container {
			width: 780px;
			margin: 40px auto;
			background: white;
			padding: 20px;
			overflow: auto;
			-webkit-box-sizing: border-box;
		}
.content {
			width: 420px;
			background-color: #0072C6;
			padding: 10px;
			position: relative;
			border-radius: 6px;
			color: white;
			border: solid 2px #333;
		}

		.content .triangle {
			width: 0px;
			height: 0px;
			position: absolute;
			border-style: solid;
			border: solid 2px #333;
			border-width: 12px 0 12px 12px;
			border-color: transparent transparent transparent #0072C6;
			top: 20px;
			right: -12px

		}

		.content .avatar {
			width: 80px;
			height: 80px;
			background-color: #333;
			float: left;
			margin-right: 10px;
			z-index: 2;
		}

ya con nuestro código voy a explicar las líneas de códigos que tienen como clase, .content .triangle que obviamente son las que le dan el aspecto de burbuja con el trianbgulo que está en la parte derecha de la caja del DIV -content....

Las primeras dos propiedades que son: width y height, se le asigna valores de 0 a ambos para que asi no tenga ningun tamaños y podamos simular lo que queremos solo con bordes..
La propiedad siguiente es la propiedad absoluta, ojo (recordar que para que los elemento de dicho que están en el content tienen que ser ralativo para que nuestros elementos internos sean absolutos), ¿Por qué absoluto?, porque así podemos mover nuestro elemento donde queramos, eso si en el elemento que lo contiene....

Y aquí viene el borde!!!!

Código:

  border-style: solid;
  border-width: 12px 0 12px 12px;
  border-color: transparent transparent transparent #0072C6;

Es el estilo del borde

border width se define entre 4 valores del dicho border

broder-color: con 4 valores transparentes y uno con el color en la dirección correspondiente

Aqui el ejemplo:

**Muga** · 28-abr-2013

Gracias por compartir tu conocimiento sobre el tema Hectorsito20.

**tortex** · 28-abr-2013

Gracias compañero...

**VJEVans** · 28-abr-2013

necesito aprender ....

gracias por la info compa !!

**thegrimdark** · 28-abr-2013

Grazias poner manos ala hobra Html y Java y php

baduser · 29-abr-2013

fernandotipop · 10-may-2013

muy buena info gracias!!!!!!!!

28-abr-2013	#1
Hectorsito20 Desarrollador HTML5 & CSS3 Ingreso: octubre-2011 Ubicación: Republica Dominicana, Punta Cana Bávaro Mensajes: 157 Sexo: País: Signo: Agradecido: +445	Burbujas para tooltip, súper fácil! Saludos para todos, codeando me enteré de que hacer burbujas para tu tooltips ó lo que desees en tu sitio web es más fácil de lo que parece, empecemos.. Obviamente lo primero es nuestro html, como en todo proyecto Código: <!doctype html> <html lang="es"> <head> <title>Practica Javascript</title> <meta charset="uft-8"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> </head> <body> <div id="container"> <div class="content"> <div class="avatar"> </div> <h3>James Poetrodriguez</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p> <div class="triangle"></div> </div> </div> </body> </html> Ojo, si estás siguiendo éste tutorial creo que no es necesario la explicación del html, pero por si acaso una pequeña expliación de lo que es el HTML para éste ejemplo: Lo primero que hicismo fué crear una etiquta DIV para el contenedor de nuestro ejemplo en mi caso la llamé (container) antesediendole una almoadilla para poder llamarla desde los estilos CSS. después creo otro DIV para el content interno é hijo de container. OJO, el nombre es indiferente ya que cada quien puede nombrarla cómo deseen.. bueno y asi sucesivamente con los demás, todo va a depender de lo que queramos hacer obviamente aqui ya es cuestión de imaginación y creatividad de cada quien. Ahora si... ya creo que tenemos que entrar en materia.. bueno para empezar tenemos que aplicar algunas propiedades básica al body, (no se preocupen nada del otro mundo), son propiedades cómo margin, padding, font.-family, etc... seguido de ésto vamos al construir lo que venimos hacer aqui, una burbuja con css básico. este es el códido: Código: body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; background: #666; } * { margin: 0; padding: 0; } a { text-decoration: none; } #container { width: 780px; margin: 40px auto; background: white; padding: 20px; overflow: auto; -webkit-box-sizing: border-box; } .content { width: 420px; background-color: #0072C6; padding: 10px; position: relative; border-radius: 6px; color: white; border: solid 2px #333; } .content .triangle { width: 0px; height: 0px; position: absolute; border-style: solid; border: solid 2px #333; border-width: 12px 0 12px 12px; border-color: transparent transparent transparent #0072C6; top: 20px; right: -12px } .content .avatar { width: 80px; height: 80px; background-color: #333; float: left; margin-right: 10px; z-index: 2; } ya con nuestro código voy a explicar las líneas de códigos que tienen como clase, .content .triangle que obviamente son las que le dan el aspecto de burbuja con el trianbgulo que está en la parte derecha de la caja del DIV -content.... Las primeras dos propiedades que son: width y height, se le asigna valores de 0 a ambos para que asi no tenga ningun tamaños y podamos simular lo que queremos solo con bordes.. La propiedad siguiente es la propiedad absoluta, ojo (recordar que para que los elemento de dicho que están en el content tienen que ser ralativo para que nuestros elementos internos sean absolutos), ¿Por qué absoluto?, porque así podemos mover nuestro elemento donde queramos, eso si en el elemento que lo contiene.... Y aquí viene el borde!!!! Código: border-style: solid; border-width: 12px 0 12px 12px; border-color: transparent transparent transparent #0072C6; Es el estilo del borde border width se define entre 4 valores del dicho border broder-color: con 4 valores transparentes y uno con el color en la dirección correspondiente Aqui el ejemplo: Última edición por Hectorsito20; 28-abr-2013 a las 13:56 Razón: Faltó la imagen del ejemplo :D

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
.: Clasificacion de Malware - Amenazas Para Nuestra PC - Informacion :.	VJEVans	Seguridad	16	29-jul-2012 21:52
GLOSARIO ... avi, Cine en Casa, videograbación, etc, etc ...	Eloy58	Cine, TV & Videos Online	15	23-jul-2012 08:57
Las más importantes Obras de la Música Clásica	Felina05	Música	9	05-ene-2012 14:32
Feria de Abril (Sevilla)	jchierro	Off-Topic	6	24-abr-2010 19:21

Los siguientes 7 usuarios agradecen a Hectorsito20 por este mensaje:
baduser (29-abr-2013), Francisco6812 (20-may-2013), Gabriel Go Ol (27-may-2013), Muga (28-abr-2013), tortex (28-abr-2013), Tururojo (10-may-2013), VJEVans (28-abr-2013)

28-abr-2013	#2
Muga Erudito Ingreso: noviembre-2011 Ubicación: Loading... Mensajes: 2.796 Sexo: País: Signo: Agradecido: +3.174	Gracias por compartir tu conocimiento sobre el tema Hectorsito20.

Los siguientes 2 usuarios agradecen a Muga por este mensaje:
Hectorsito20 (28-abr-2013), tortex (28-abr-2013)

28-abr-2013	#3
tortex MOD/Foro Ingreso: marzo-2010 Ubicación: A un costado del tomacorriente... Mensajes: 7.002 Sexo: País: Signo: Agradecido: +19.141	Gracias compañero... "...Si hubiera más personas que amaran el hogar sobre el oro, el mundo sería un lugar más feliz..." Thorin

28-abr-2013	#4
VJEVans Erudito Ingreso: mayo-2010 Ubicación: Arequipa (Peru) Mensajes: 6.935 Sexo: País: Signo: Agradecido: +10.322	necesito aprender .... gracias por la info compa !!

28-abr-2013	#5
thegrimdark Ayudante Frecuente Ingreso: octubre-2012 Ubicación: Venezuela, Maracay Mensajes: 143 Sexo: País: Signo: Agradecido: +136	Grazias poner manos ala hobra Html y Java y php

29-abr-2013	#6
baduser Banned Ingreso: julio-2009 Ubicación: Mexico City, Capital del Mundo Mensajes: 33.485 Sexo: País: Signo: Agradecido: +70.458

10-may-2013	#7
fernandotipop Banned Ingreso: mayo-2012 Mensajes: 836 Sexo: País: Signo: Agradecido: +3.237	muy buena info gracias!!!!!!!!

(0 miembros y 1 visitantes)