Tooltip Image and Text wrap

[jamiet757]

I am using a jQuery tooltip package I found here:

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

 

I am using it like example #2:

http://cssglobe.com/lab/tooltip/02/

with the caption.

 

The problem is, if the caption is longer than the image is wide, how do I get it to wrap the text around underneath? Right now it just lengthens the gray box and looks ridiculous. I can't use fixed widths because the images are varying widths and the text is varying lengths for each image, so it has to be something that is automatic when the class is called.

 

If anyone can't be troubled to download the files if you need to see the source code I can post it. Just ask.

 

Maybe this is just a problem with the CSS, I don't know. Any help is appreciated!

[haku]

Set a width on the text using CSS.

[jamiet757]

Well the problem is that this is how the tooltip is presented:

 

<a href="{ITEM_URL}" class="preview" title="{ITEM_DESC}" name="Author: {ITEM_AUTHOR}" id="{ITEM_IMG2}"><img src="{ITEM_IMG}" border="0" /></a>

 

The {ITEM_DESC} and {ITEM_AUTHOR} are replaced by a description and author text for the image as it is pulled from the database, and they need to reside in the title and name attribute for the <a> tag in order to appear in the caption for the image preview, so how can I assign a class to that?

[haku]

You don't assign a class to that. The jquery tooltip will generate some HTML. The container *should* have an ID or a class. Use that to set your width.

I'm sorry, i haven't looked at the specific example. But any script worth it's weight will give you something to target the CSS with. So check the generated HTML to see what it looks like.

[jamiet757]

Great, thanks for heading me in the right direction!

[jamiet757]

Well I still cannot get it to work. I can't set a fixed width for the <p> since each image might be a different width. Here is the javascript code:

 

/*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*/

this.imagePreview = function(){    
        
        xOffset = 10;
        yOffset = 10;
        
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        this.n = this.name;
        this.name = "";
        var d = (this.n != "") ? "<br/>" + this.n : "";
        $("body").append("<p id='preview'><img src='"+ this.id +"' alt='"+ this.t +"' />"+ c + d +"</p>");                                 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("slow");                        
    },
    function(){
        this.title = this.t;
        this.name = this.n;    
        $("#preview").remove();
    });        
    
    $(".preview").mousemove(function(e){
var posY;

if (e.pageY - $(window).scrollTop() + $('#preview').height() >= $(window).height() ) {
posY = $(window).height() + $(window).scrollTop() - $('#preview').height() - 15 ;
} else {
posY = e.pageY - 15;
}
$("#preview")
.css("top",(posY - 15) +"px")
.css("left",(e.pageX + 15) + "px");
});     
};


// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

 

Another question, the section that starts with  $(".preview").mousemove(function(e) prevents the popup from going below the screen, how can I prevent it from going off the sides of the screen as well?