Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Un solo estilo para varios tooltip

 Estas en el tema de Un solo estilo para varios tooltip en el foro de CSS en Foros del Web. Buenas tardes Utilizo este toolTip: aquí/ En el head: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original < script type = "text/javascript" charset = "utf-8" src ...
  #1 (permalink)  
Antiguo 26/02/2015, 13:54
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Pregunta Un solo estilo para varios tooltip
Buenas tardes
Utilizo este toolTip:
aquí/

En el head:

Código Javascript: 
Ver original
  1. <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
  2. <script type="text/javascript" charset="utf-8" src="js/original.js" ></script>

Código Javascript: 
Ver original
  1. <script type="text/javascript" charset="utf-8">
  2. $(document).ready(function(){
  3.         
  4. $("#stay-target-1").ezpz_tooltip({
  5. contentPosition: 'belowStatic',
  6. stayOnContent: true,
  7. offset: 0
  8. });
  9.  
  10. $("#stay-target-2").ezpz_tooltip({
  11. contentPosition: 'belowStatic',
  12. stayOnContent: true,
  13. offset: 0
  14. });
  15.  
  16. });
  17. </script>

Y en el body:

Código HTML: 
Ver original
  1. <div class="marco_revista_1">
  2. <div class="stay-tooltip-target tooltip-target" id="stay-target-1">
  3. <img src="images/boton_1.jpg"></div>
  4. </div>
  5.  
  6. <div class="marco_revista_1">
  7. <div class="stay-tooltip-target tooltip-target" id="stay-target-2">
  8. <img src="images/boton_2.jpg"></div>
  9. </div>
  10.  
  11. <div class="stay-tooltip-content tooltip-content" id="stay-content-1">
  12. <img src="images/imagen_1.jpg" />
  13. <p>Texto...</p>
  14. </div>


Y el CSS:

Código CSS: 
Ver original
  1. #stay-content-1 {
  2.     width: 450px;
  3.     height: auto;
  4.     margin: 0 auto 0 auto;
  5.     border: none;
  6.     }
  7.     
  8. #stay-content-1 p {
  9.     font-family: 'Merriweather', serif;
  10.     font-size: 0.7em;
  11.     color: #023568;
  12.     line-height: 20px;
  13.     margin-top: 10px;
  14.     text-align: justify;
  15.     float: left;
  16.     }
  17.     
  18. #stay-content-1 h5 {
  19.     font-family: 'Merriweather', serif;
  20.     font-size: 0.8em;
  21.     color: #023568;
  22.     margin-bottom: 10px;
  23.     font-weight: normal;
  24.     line-height: 15px;
  25.     text-align: left;
  26.     }
  27.  
  28. #stay-content-2 {   
  29.     width: 450px;
  30.     height: auto;
  31.     margin: 0 auto 0 auto;  
  32.     border: none;   
  33.     }
  34.     
  35. #stay-content-2 p {
  36.     font-family: 'Merriweather', serif;
  37.     font-size: 0.7em;
  38.     color: #023568;
  39.     line-height: 20px;
  40.     margin-top: 10px;
  41.     text-align: justify;
  42.     float: left;
  43.     }
  44.     
  45. #stay-content-2 h5 {
  46.     font-family: 'Merriweather', serif;
  47.     font-size: 0.8em;
  48.     color: #023568;
  49.     margin-bottom: 10px;
  50.     font-weight: normal;
  51.     line-height: 15px;
  52.     text-align: left;
  53.     }

¿Cómo hago para solo generar un estilo (css) para todos y no tener que repetir "stay-content-1", "stay-content-2...etc"

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 26/02/2015, 15:33
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: Un solo estilo para varios Tootip
No se si he entendido la pregunta... pero solo tienes que crear una clase nueva que lleven todos esos elementos y aplicarle estilos, y así no tendrás que repetirte en el css
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #3 (permalink)  
Antiguo 26/02/2015, 15:36
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Un solo estilo para varios Tootip
Leyendo la documentación pone que sigue una convención para asignar identificadores al tooltip que genera. Que lo puedes cambiar pasando otro parámetro por la función, pero seguirá siendo un identificador.

Yo lo que haría sería no usar esa cosa. Es una forma bastante poco escalable de trabajar.

De todas formas, una posible solución sería usar selectores de atributo de CSS.
__________________
(:
  #4 (permalink)  
Antiguo 27/02/2015, 05:29
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Un solo estilo para varios Tootip
Hola Zeromm y pzin

Zeromm me pudes indicar como se haría como tu lo indicas. Gracias

pzin, cómo lo utilizarias tu o si me puedes indicar algún ejemplo de la forma en que lo harías. Gracias.

El asunto es este:

Yo por cada ToolTip debe generar un .class "stay-content-1", "stay-content-2...etc

¿Cómo haría para no tener que generar por cada Tooltip un .class.

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #5 (permalink)  
Antiguo 27/02/2015, 06:50
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: Un solo estilo para varios Tootip
Así quedaría el código:
Código HTML: 
Ver original
  1. <div class="marco_revista_1">
  2. <div class="stay-tooltip-target tooltip-target CLASENUEVA" id="stay-target-1">
  3. <img src="images/boton_1.jpg"></div>
  4. </div>
  5.  
  6. <div class="marco_revista_1">
  7. <div class="stay-tooltip-target tooltip-target CLASENUEVA" id="stay-target-2">
  8. <img src="images/boton_2.jpg"></div>
  9. </div>
  10.  
  11. <div class="stay-tooltip-content tooltip-content CLASENUEVA" id="stay-content-1">
  12. <img src="images/imagen_1.jpg" />
  13. <p>Texto...</p>
  14. </div>

luego en el css le das los estilos a "CLASENUEVA" y se aplicarán a todos los elementos que tengan esa clase.
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #6 (permalink)  
Antiguo 27/02/2015, 07:03
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Un solo estilo para varios Tootip
Hola Zeromm
mmm pero mira que lo que tengo que repetir por cada Tooltip es:

id="stay-target-1", id="stay-target-2"...etc

Código CSS: 
Ver original
  1. #stay-content-1 {
  2.     width: 450px;
  3.     height: auto;
  4.     margin: 0 auto 0 auto;
  5.     border: none;
  6.     }
  7.     
  8. #stay-content-1 p {
  9.     font-family: 'Merriweather', serif;
  10.     font-size: 0.7em;
  11.     color: #023568;
  12.     line-height: 20px;
  13.     margin-top: 10px;
  14.     text-align: justify;
  15.     float: left;
  16.     }
  17.     
  18. #stay-content-1 h5 {
  19.     font-family: 'Merriweather', serif;
  20.     font-size: 0.8em;
  21.     color: #023568;
  22.     margin-bottom: 10px;
  23.     font-weight: normal;
  24.     line-height: 15px;
  25.     text-align: left;
  26.     }
  27.  
  28. #stay-content-2 {   
  29.     width: 450px;
  30.     height: auto;
  31.     margin: 0 auto 0 auto;  
  32.     border: none;   
  33.     }
  34.     
  35. #stay-content-2 p {
  36.     font-family: 'Merriweather', serif;
  37.     font-size: 0.7em;
  38.     color: #023568;
  39.     line-height: 20px;
  40.     margin-top: 10px;
  41.     text-align: justify;
  42.     float: left;
  43.     }
  44.     
  45. #stay-content-2 h5 {
  46.     font-family: 'Merriweather', serif;
  47.     font-size: 0.8em;
  48.     color: #023568;
  49.     margin-bottom: 10px;
  50.     font-weight: normal;
  51.     line-height: 15px;
  52.     text-align: left;
  53.     }
__________________
Diseñador Gráfico publicitario
  #7 (permalink)  
Antiguo 27/02/2015, 08:32
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: Un solo estilo para varios Tootip
Pues si no quieres añadir una nueva clase simplemente pones los estilos css separados por comas, por ejemplo:

Código CSS: 
Ver original
  1. #stay-content-1, #stay-content-2 {
  2.     width: 450px;
  3.     height: auto;
  4.     margin: 0 auto 0 auto;
  5.     border: none;
  6.     }
  7.     
  8. #stay-content-1 p, #stay-content-2 p {
  9.     font-family: 'Merriweather', serif;
  10.     font-size: 0.7em;
  11.     color: #023568;
  12.     line-height: 20px;
  13.     margin-top: 10px;
  14.     text-align: justify;
  15.     float: left;
  16.     }
  17.     
  18. #stay-content-1 h5, #stay-content-2 h5 {
  19.     font-family: 'Merriweather', serif;
  20.     font-size: 0.8em;
  21.     color: #023568;
  22.     margin-bottom: 10px;
  23.     font-weight: normal;
  24.     line-height: 15px;
  25.     text-align: left;
  26.     }
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #8 (permalink)  
Antiguo 27/02/2015, 11:31
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Un solo estilo para varios Tootip
Hola Zeromm
Pero se vuelve muy extenso ya que son más de 100 id="stay-target-1", id="stay-target-2"...etc

Sería como hacerlo así:

Código HTML: 
Ver original
  1. <div class="marco_revista_1">
  2. <div class="stay-tooltip-target tooltip-target" id="stay-target-1">
  3. <img src="images/boton_1.jpg"></div>
  4. </div>
  5.  
  6. <div class="marco_revista_1">
  7. <div class="stay-tooltip-target tooltip-target" id="stay-target-1">
  8. <img src="images/boton_2.jpg"></div>
  9. </div>

Código CSS: 
Ver original
  1. #stay-content-1 {
  2.     width: 450px;
  3.     height: auto;
  4.     margin: 0 auto 0 auto;
  5.     border: none;
  6.     }
  7.     
  8. #stay-content-1 p {
  9.     font-family: 'Merriweather', serif;
  10.     font-size: 0.7em;
  11.     color: #023568;
  12.     line-height: 20px;
  13.     margin-top: 10px;
  14.     text-align: justify;
  15.     float: left;
  16.     }
  17.     
  18. #stay-content-1 h5 {
  19.     font-family: 'Merriweather', serif;
  20.     font-size: 0.8em;
  21.     color: #023568;
  22.     margin-bottom: 10px;
  23.     font-weight: normal;
  24.     line-height: 15px;
  25.     text-align: left;
  26.     }

A eso quiero llegar.

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #9 (permalink)  
Antiguo 27/02/2015, 11:36
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: Un solo estilo para varios Tootip
Pues ya te dije como hacerlo. Añadiendo una clase a cada elemento html que se vaya a repetir
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #10 (permalink)  
Antiguo 27/02/2015, 12:19
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Un solo estilo para varios Tootip
No se... :(
__________________
Diseñador Gráfico publicitario
  #11 (permalink)  
Antiguo 27/02/2015, 12:34
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: Un solo estilo para varios Tootip
Esto sería un ejemplo de html

Código HTML: 
Ver original
  1. <div class="marco_revista_1">
  2. <div class="stay-tooltip-target tooltip-target CLASENUEVA" id="stay-target-1">
  3. <img src="images/boton_1.jpg"></div>
  4. </div>
  5.  
  6. <div class="marco_revista_1">
  7. <div class="stay-tooltip-target tooltip-target CLASENUEVA" id="stay-target-2">
  8. <img src="images/boton_2.jpg"></div>
  9. </div>
  10.  
  11. <div class="stay-tooltip-content tooltip-content CLASENUEVA" id="stay-content-1">
  12. <img src="images/imagen_1.jpg" />
  13. <p>Texto...</p>
  14. </div>

Y los estilos que tienes que aplicar a todos los "stay-target..." los aplicarías de esta forma:

Código CSS: 
Ver original
  1. .CLASENUEVA {
  2.     width: 450px;
  3.     height: auto;
  4.     margin: 0 auto 0 auto;
  5.     border: none;
  6.     }
  7.     
  8. .CLASENUEVA p {
  9.     font-family: 'Merriweather', serif;
  10.     font-size: 0.7em;
  11.     color: #023568;
  12.     line-height: 20px;
  13.     margin-top: 10px;
  14.     text-align: justify;
  15.     float: left;
  16.     }
  17.     
  18. .CLASENUEVA h5 {
  19.     font-family: 'Merriweather', serif;
  20.     font-size: 0.8em;
  21.     color: #023568;
  22.     margin-bottom: 10px;
  23.     font-weight: normal;
  24.     line-height: 15px;
  25.     text-align: left;
  26.     }

así todos los "stay-target..." tendrán el mismo estilo sin duplicar nada
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #12 (permalink)  
Antiguo 27/02/2015, 13:09
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Un solo estilo para varios Tootip
No funcionó... :(
__________________
Diseñador Gráfico publicitario
  #13 (permalink)  
Antiguo 28/02/2015, 09:07
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Un solo estilo para varios Tootip
Que lio esto...no me da. Alguien que me pueda ayudar. Gracias
__________________
Diseñador Gráfico publicitario
  #14 (permalink)  
Antiguo 02/03/2015, 07:16
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Un solo estilo para varios Tootip
NOOO...NOOO...NOOO...no logro solucionar esoooo.... :(
Ayuda por favor
__________________
Diseñador Gráfico publicitario
  #15 (permalink)  
Antiguo 03/03/2015, 05:43
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: Un solo estilo para varios Tootip
Problema solucionado...ufff casi que no.
Si funcionó como decia Zeromm (ya no tengo que duplicar por cada toolTip el .css) el asunto es que si debo dejar por cada toolTip (id="stay-target-1", id="stay-target-2"...etc), Sería bueno no tener que poner por cada uno este ID.

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #16 (permalink)  
Antiguo 03/03/2015, 06:23
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: Un solo estilo para varios Tootip
Perfecto :) Si puedes marca el tema como solucionado ;)
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.

Etiquetas: color, estilo, float, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:23.