Threaded Mode | Linear Mode

afamdi

Hi I'm evaluating qTip2 for use at a company I am consulting for ...I created a test page and it seems that when setting dynamic content the tooltip does not take the entire width of the content and ends up clipping the content.
this happens in Firefox and safari, but it views perfectly in IE6.

please advise.

JS Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Width Issue in FireFox and Safari</title>
    <style type="text/css">
        ul.tester li
        {
            padding:8px;
        }
 
        .myClass
        {
            width:800px !important;
        }
    </style>    
 
 
<link href="css/jquery.qtip.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.qtip.js" type="text/javascript" ></script>
 
</head>
<body>
    <ul class="tester">
        <li>
            <a title='this is the 1st option'>Q tip test 1</a>
        </li>
        <li>
            <a title='this is the 2nd option'>            Q tip test 2        </a>
        </li>
        <li>
            <a title='this is the 3rd option'>            Q tip test 3        </a>
        </li>
        <li>
          <a title='this is the 4th option'>            Q tip test 4        </a>
        </li>
    </ul>
 
    <button id="showTip" type="button">Show Tips</button>
</body>
 
<script type="text/javascript">
$(document).ready(function(){
    $('a[title]').qtip({
       content: {
            text: function(){
                return qTipContent();
            }
       }
       ,style:{
            classes:"myClass"
       }
       ,position:{
            my:'left top'
            ,at:'right center'
       }
       ,show: {
            target: $("#showTip")
            ,event: 'click'
       }
    });
});
function qTipContent()
{
    var html = " \
<div style='width:400px;height:400px;border:solid red;'> \
<h1> Dynamic Content Example </h1> \
</div>  \
";
 
    return html;
}
</script>
</html>

***Craig***

afamdi, try out qTip2: http://craigsworks.com/projects/qtip2/ . RC3 has lots of problems with width/height settings.

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	qTip2 themeroller question	gmilby	1	33	14th May 17:50 Last Post: Craig
	How set width that's greater than default max on for exactly one tip?	AlKoch	5	119	7th May 21:33 Last Post: Craig
	[Solved] Ajax imagemap data problem	carelmeyer	0	941	1st May 17:39 Last Post: carelmeyer
	using qTip inside a Mozilla Firefox addon	emafuma	7	796	24th April 15:49 Last Post: Craig
	qtip in FireFox extension	archmisha	1	92	22nd April 16:10 Last Post: Craig
	[Solved] qTip2 inside map infowindow	costales	3	194	15th April 08:29 Last Post: costales
	[Solved] Problem with my map area installation	timtimd	1	244	14th March 17:34 Last Post: Craig
	Hiding tooltip problem	sohailanwarpk	2	403	31st January 12:13 Last Post: sohailanwarpk
	[Solved] Anti Virus flags up a problem	OllyPercival	9	2,490	21st November 21:45 Last Post: Col
	[Solved] ajax tip width help	jondow	2	705	10th November 21:21 Last Post: jondow