Question

I am using qTip 2 to display a larger image on hover and it semi works. The image shows but not the full width. How do I get it to show full width?

Code:

HTML

<img src="img.jpg" usemap="#Map" class="center" style="width:900px;" 
border="0" />
<map name="Map" id="Map">
  <area class="1" shape="rect" coords="4,3,225,150" />
</map>

JS

var $j = jQuery.noConflict();
$j('.1').qtip({
   content: '<img src="img1.jpg" width="600"  />',
position: {
  my: 'left top', 
  at: 'right top', 
  target: $j('.1') 
  },
  style: {
  classes: 
  'ui-tooltip-tipsy'
}
});

What should I do to get the image to show full width?

I tried adding this code and it did not work:

          tip: {
        width: 600
    }

Answer 1

you only have to change the max-width of your css file:

.ui-tooltip, .qtip{
    max-width: 900px; /* Change this? */
}

See this example at jsfiddle

HTML:

<p>
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=1" data-pic="http://www.dummyimage.com/600x600/4c6aff/000000.png&text=1">
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=2" data-pic="http://www.dummyimage.com/300x300/4c6aff/000000.png&text=2">
    <img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=3" data-pic="http://www.dummyimage.com/150x150/4c6aff/000000.png&text=3">
</p>

JAVASCRIPT

$(function() {
    $("img").each(function() {
        $(this).qtip({
            content: {
                text: function(api) {
                    return "<img src='" + $(this).attr("data-pic") + "' class='dit'>";
                }
            }
        });
    });
});​

CSS

p {
    margin-top: 50px;
    margin-left: 100px;
}
img {
    padding: 10px;
}
.ui-tooltip, .qtip{
    max-width: 10000px; /* Change this? */
}