Cambiar estilo de Title en enlace

[Tecktonikrazy]

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??????

[Carlangueitor]

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

Saludos

[DeveloperFresh]

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]

[annirami]

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.

[danneg]

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

[XxflezhaxX]

danneg esta bueno ese!!
pero como implementarlo ?? estoy fuera de javascript yo =P

[danneg]

pues es sencillo

obviamente primero vincular las dependencias

Código HTML:

<link type="text/css" rel="stylesheet" href="tipsy.css" />
    <script type="text/javascript" src="jquery.tipsy.js">
    </script>
 

y despues solo hacer el simple uso

Código Javascript:

$(function() {
            $("[title]").tipsy({fade: false, gravity: $.fn.tipsy.autoNS});
        });
 

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:

(function($) {
    $.fn.tipsy = function(options) {
 
        options = $.extend({}, $.fn.tipsy.defaults, options);
        
        return this.each(function() {
            
            var opts = $.fn.tipsy.elementOptions(this, options);
            
            $(this).hover(function() {
 
                $.data(this, 'cancel.tipsy', true);
 
                var tip = $.data(this, 'active.tipsy');
                if (!tip) {
                    tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
                    tip.css({position: 'absolute', zIndex: 100000});
                    $.data(this, 'active.tipsy', tip);
                }
 
                if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') {
                    $(this).attr('original-title', $(this).attr('title') || '').removeAttr('title');
                }
 
                if ($(this).attr('alt') || typeof($(this).attr('original-title')) != 'string') {
                    $(this).attr('original-title', $(this).attr('alt') || '').removeAttr('alt');
                }
 
                var title;
                if (typeof opts.title == 'string') {
                    title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title);
                } else if (typeof opts.title == 'function') {
                    title = opts.title.call(this);
                }
 
                tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
 
                var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
                tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
                tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
                var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
                var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity;
 
                switch (gravity.charAt(0)) {
                    case 'n':
                        tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
                        break;
                    case 's':
                        tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
                        break;
                    case 'e':
                        tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
                        break;
                    case 'w':
                        tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
                        break;
                }
 
                if (opts.fade) {
                    tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8});
                } else {
                    tip.css({visibility: 'visible'});
                }
 
            }, function() {
                $.data(this, 'cancel.tipsy', false);
                var self = this;
                setTimeout(function() {
                    if ($.data(this, 'cancel.tipsy')) return;
                    var tip = $.data(self, 'active.tipsy');
                    if (opts.fade) {
                        tip.stop().fadeOut(function() { $(this).remove(); });
                    } else {
                        tip.remove();
                    }
                }, 100);
 
            });
            
        });
        
    };
    
    // Overwrite this method to provide options on a per-element basis.
    // For example, you could store the gravity in a 'tipsy-gravity' attribute:
    // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
    // (remember - do not modify 'options' in place!)
    $.fn.tipsy.elementOptions = function(ele, options) {
        return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
    };
    
    $.fn.tipsy.defaults = {
        fade: false,
        fallback: '',
        gravity: 'n',
        html: false,
        title: 'title'
    };
    
    $.fn.tipsy.autoNS = function() {
        return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
    };
    
    $.fn.tipsy.autoWE = function() {
        return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
    };
    
})(jQuery);