JS hover buble with fade

Does anyone know of anything like this that has a fade in/out function? (sorry about the typo in the title)

http://trentrichardson.com/examples/csstooltips/

thanks.

 

http://script.aculo.us

Loads of JS effects

 

You could also use jquery, and cluetip (sorry, I am a new member so cannot post a link to cluetip - just google it)

Makes it very easy.

 

i wrote a fun sliding bubble / tooltip for mootools a while back: http://fragged.org/slidingtips-a-mootools-apple-style-tooltip-effect_349.html
it has an animation and a fade as well.

 

Is there a demo of it?

 

er. sure, try http://fragged.org/dev/slidingTips.php

1st bubble will come up when you focus on the town field.

also, as you mouseover the highlighted terms (developer), another example.

it can be tweaked so it goes away on any event you like but the default is mouseout. however, you can do click, blur, focus, dblclick etc etc.

visually it can be styled to fit whatever needs you have as well, replacing the background. i have it in production with square backgrounds or bubble chats as well.

i think i should refactor it to a class but its more convenient as it is - an element prototype.

Element.implement({
    slidingTip: function(what, options) {
        // apple style tooltip
        var _this = this, coords = _this.getCoordinates(), options = $merge({
            eventEnd: "mouseleave",
            eventEndTrigger: _this,     // parent element or self
            topOffset: 90,             // offset when in full view
            topStartOffset: 100,        // offset for animation start
            opacity: .8,                // target opacity in full view
            className: "tooltip",       // linked to css
            morphOptions: {
                duration: 300,
                transition: Fx.Transitions.Sine.easeOut
            },
            delay: 0,                    // can dispose on a timer, in seconds
            id: "tid" + $random(100, 1000)
        }, options);

        // we only need one tip instance per parent element.
        if ($type(this.tip) != "element") {
            this.tip = new Element("div", {
                "class": options.className
                // id: options.id,
            });
        }

        // if it's an existing one, with an implicit id, pick it up
        if ($(options.id))
            this.tip = $(options.id);

        // set initial options and html
        this.tip.set({
            opacity: 0,
            html: "<div style='padding:20px'>" + what + "</div>",
            styles: {
                left: coords.left + coords.width / 2
            }
        }).inject(document.body).removeEvents();

        // show it. cancel any previous animation instances for tip
        if ($type(this.morph) == "object")
           this.morph.cancel();
        else
            this.morph = new Fx.Morph(this.tip, options.morphOptions);

        // show it. really.
        this.morph.start({
            opacity: options.opacity,
            top: [coords.top - _this.tip.getSize().y - options.topStartOffset, coords.top - options.topOffset]
        }).chain(function() {
            // once done, decide how to exit
            if (options.delay == 0) {
                // based on an event.
                options.eventEndTrigger.addEvent(options.eventEnd, function() {
                    _this.morph.cancel();
                    _this.slidingTipaway();
                });
            }
            else {
                // based on a timed delay
                (function() {
                    _this.slidingTipaway();
                }).delay(options.delay);
            }
        });

        // define the tooltip close animation morph object
        var closeAnimation = {
            opacity: 0,
            top: coords.top - _this.tip.getSize().y - options.topStartOffset
        }

        // ... and save it within the parent element
        this.store("closeAnimation", closeAnimation);

        return this;
    },
    slidingTipaway: function() {
        // animate an slidingTip, opposite on in method.
        if (this.tip) {
            this.morph.start(this.retrieve("closeAnimation"));
        }

        return this;
    }
}); // end element.implement

// use: $("something").slidingTip(message, options).othercommands()... 

PHP:

 

Cool, it looks really good.

Can you make the slide in/out a shorter distance?

 

sure. change topStartOffset: 100 to a lower value

if you change it to a negative value, it will slide up instead.

 

Thanks, I have just realised that it is probably not going to work for me. I have over 40 different tooltips and I just noticed that all the code is included in the JS.

 

there are so many ways to approaching this

1. you can bind a mouseover event that fetches the tip through ajax (if not cached) and then runs the tooltip
2. you can do a class-based and relational reference.

for example:

// in js:
var tooltips = {
    1: "This is the text for tooltip no. 1",
    3: "this is the txt for tooltip #3.",
    5: "this is the txt for tooltip 5. these ids can be from a DB"
};

PHP:

this can be achieved through json_encode($array) from PHP where the tips data is in the shape of:

$tips = Array(
    "someid" => "tooltip text"
);

PHP:

to do all the tooltips in one go you'd do in your bodytext:

blah blah <span class="tip" data-id="4">trigger</span> blah blah <span class="tip" data-id="56">triggerword</span> blah blah

PHP:

and the js to apply the tips combined with the tips object above:

$$("span.tip").each(function(el) {
   var tipBody = tooltips[el.get("data-id")]; // gets corresponding text from the tooltips object
   el.addEvents({
       "mouseenter": function() {
           this.slidingTip(tipBody, {
               topOffset: 88,
               opacity: 1
           });
       }
   });
});

PHP:

done.

 

Sorry you have lost me now on how to get this on my site.

Can you put all that in one file for me to use?