Foros del Web » Creando para Internet » CSS »

Cambiar estilo de Title en enlace

Estas en el tema de Cambiar estilo de Title en enlace en el foro de CSS en Foros del Web. Hola, alguien sabe como cambio el estilo de title en <a href="#" title ="Titulo">Link</a> para que el fondo y texto sean de otro color??????...
  #1 (permalink)  
Antiguo 16/07/2010, 00:17
Avatar de Tecktonikrazy  
Fecha de Ingreso: enero-2010
Mensajes: 224
Antigüedad: 7 años, 11 meses
Puntos: 3
Pregunta Cambiar estilo de Title en enlace

Hola, alguien sabe como cambio el estilo de title en <a href="#" title="Titulo">Link</a> para que el fondo y texto sean de otro color??????
  #2 (permalink)  
Antiguo 16/07/2010, 00:27
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Cambiar estilo de Title en enlace

No se puede, pero lo que puedes hacer es simularlo: http://www.araudi.net/ejemplos/tooltipCSS.html

Saludos
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 16/07/2010, 00:32
Avatar de DeveloperFresh  
Fecha de Ingreso: mayo-2009
Ubicación: Ancon City
Mensajes: 35
Antigüedad: 8 años, 7 meses
Puntos: 3
Respuesta: Cambiar estilo de Title en enlace

Asi es, lo que se puede hacer es simular aqui hay un ejemplo con codigo :
[URL="http://www.dhtmlya.com.ar/simulador/simulador.php?cod=67&punto=67"]http://www.dhtmlya.com.ar/simulador/simulador.php?cod=67&punto=67[/URL]
  #4 (permalink)  
Antiguo 16/07/2010, 08:39
Avatar de annirami  
Fecha de Ingreso: septiembre-2009
Ubicación: Lima, Perú
Mensajes: 53
Antigüedad: 8 años, 2 meses
Puntos: 3
Respuesta: Cambiar estilo de Title en enlace

Me ha gustado la ayuda de "Carlangueitor" una forma de hacer sencilla de personalizar el title, o tooltip (como le digo). Aunque también hay tooltips más personalizados como : sexyToolTips o dijit.Tooltip, aunque hay más, claro.
Saludos.
  #5 (permalink)  
Antiguo 16/07/2010, 20:40
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Cambiar estilo de Title en enlace

yo en lo persona prefiero este

http://onehackoranother.com/projects/jquery/tipsy/

este muy de moda, como en youtube, twitter, facebook, es muy parecido, ademas de personalizable, por medio de css
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #6 (permalink)  
Antiguo 17/07/2010, 11:21
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Cambiar estilo de Title en enlace

danneg esta bueno ese!!
pero como implementarlo ?? estoy fuera de javascript yo =P
  #7 (permalink)  
Antiguo 17/07/2010, 17:30
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Cambiar estilo de Title en enlace

pues es sencillo

obviamente primero vincular las dependencias


Código HTML:
Ver original
  1. <link type="text/css" rel="stylesheet" href="tipsy.css" />
  2.     <script type="text/javascript" src="jquery.tipsy.js">
  3.     </script>

y despues solo hacer el simple uso

Código Javascript:
Ver original
  1. $(function() {
  2.             $("[title]").tipsy({fade: false, gravity: $.fn.tipsy.autoNS});
  3.         });

todo dentro de head!

esto setrvira muy bien, sera para para que se posicione donde mejor le venga, si buscas en la pagina vinen mas ejemplos, solo traduce si no entiendes ingles!!

edite un poco el codigo para que igual me diera con los atributos alt de las images, no se si igual te sirva

chao!!

Código Javascript:
Ver original
  1. (function($) {
  2.     $.fn.tipsy = function(options) {
  3.  
  4.         options = $.extend({}, $.fn.tipsy.defaults, options);
  5.        
  6.         return this.each(function() {
  7.            
  8.             var opts = $.fn.tipsy.elementOptions(this, options);
  9.            
  10.             $(this).hover(function() {
  11.  
  12.                 $.data(this, 'cancel.tipsy', true);
  13.  
  14.                 var tip = $.data(this, 'active.tipsy');
  15.                 if (!tip) {
  16.                     tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
  17.                     tip.css({position: 'absolute', zIndex: 100000});
  18.                     $.data(this, 'active.tipsy', tip);
  19.                 }
  20.  
  21.                 if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') {
  22.                     $(this).attr('original-title', $(this).attr('title') || '').removeAttr('title');
  23.                 }
  24.  
  25.                 if ($(this).attr('alt') || typeof($(this).attr('original-title')) != 'string') {
  26.                     $(this).attr('original-title', $(this).attr('alt') || '').removeAttr('alt');
  27.                 }
  28.  
  29.                 var title;
  30.                 if (typeof opts.title == 'string') {
  31.                     title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title);
  32.                 } else if (typeof opts.title == 'function') {
  33.                     title = opts.title.call(this);
  34.                 }
  35.  
  36.                 tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
  37.  
  38.                 var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
  39.                 tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
  40.                 tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
  41.                 var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
  42.                 var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity;
  43.  
  44.                 switch (gravity.charAt(0)) {
  45.                     case 'n':
  46.                         tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
  47.                         break;
  48.                     case 's':
  49.                         tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
  50.                         break;
  51.                     case 'e':
  52.                         tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
  53.                         break;
  54.                     case 'w':
  55.                         tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
  56.                         break;
  57.                 }
  58.  
  59.                 if (opts.fade) {
  60.                     tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8});
  61.                 } else {
  62.                     tip.css({visibility: 'visible'});
  63.                 }
  64.  
  65.             }, function() {
  66.                 $.data(this, 'cancel.tipsy', false);
  67.                 var self = this;
  68.                 setTimeout(function() {
  69.                     if ($.data(this, 'cancel.tipsy')) return;
  70.                     var tip = $.data(self, 'active.tipsy');
  71.                     if (opts.fade) {
  72.                         tip.stop().fadeOut(function() { $(this).remove(); });
  73.                     } else {
  74.                         tip.remove();
  75.                     }
  76.                 }, 100);
  77.  
  78.             });
  79.            
  80.         });
  81.        
  82.     };
  83.    
  84.     // Overwrite this method to provide options on a per-element basis.
  85.     // For example, you could store the gravity in a 'tipsy-gravity' attribute:
  86.     // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
  87.     // (remember - do not modify 'options' in place!)
  88.     $.fn.tipsy.elementOptions = function(ele, options) {
  89.         return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
  90.     };
  91.    
  92.     $.fn.tipsy.defaults = {
  93.         fade: false,
  94.         fallback: '',
  95.         gravity: 'n',
  96.         html: false,
  97.         title: 'title'
  98.     };
  99.    
  100.     $.fn.tipsy.autoNS = function() {
  101.         return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
  102.     };
  103.    
  104.     $.fn.tipsy.autoWE = function() {
  105.         return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
  106.     };
  107.    
  108. })(jQuery);
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]

Etiquetas: enlace, estilo, title
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:53.