Simpel problem with qtip

[SnowJim]

Hi,

I am having problem to show propert HTML content i qtip. This is how I have set it up :

JS Code

$(document).ready(function () {
$.fn.qtip.styles.mystyle = { 
               width: 200,
               background: '#b7d5f4',
               color: '#212121',
               textAlign: 'center',
               border: {
                  width: 1,
                  radius: 5,
                  color: '#b7d5f4'
               },
               tip: 'bottomLeft',
               name: 'dark'
            }
 
$.each($(".tooltip"), function(i,val){
                var theContent = $(val).html();
                $(val).qtip({
                    content: theContent,
                     position: {
                              corner: {
                                 target: 'topRight',
                                 tooltip: 'bottomLeft'
                              }
                           },
                       style: 'mystyle'
                });
            });
}

The HTML looks like this :

HTML Code

<div class="controlTitleContainer">
     <div class="text"><label for="ModelViewAd_Title">Titel</label></div>
     <div class="tooltip"> 
             <div class="content">
                 <div class="icon"> </div>
                 <div class="text">Text</div>
</div></div></div>

This is how the classes is built :

tooltip : Shows a Icon and when hovering this icon the tooltip will appear
content : This is the content that is loaded into the tooltip, it is set to Style Display none so it does not show in form.
.content .icon : 21x21 with a image as background (float:left)
.content .text : Contains the test (float:left)

The problem is that the image will not show in the tooltip? what am I missing?

BestRegards

[Craig]

I don't see any reason why it shouldn't work. Have you used any browser developer tools to check which classes are matching the icon element?

[SnowJim]

(13th February 16:11)Craig Wrote:  I don't see any reason why it shouldn't work. Have you used any browser developer tools to check which classes are matching the icon element?

Yes I am using FireBug. The class="content" is set to Display:none, if I change this do block then I will see the correct layout(where the icon class shows a image).

When the tooltip appear it seemse also as the icon element is placed ontop of the text instead of to the left. Changing the textAlign of the qtip to left do not fix this?

I am attaching a image that show how it looks when the content class is set to display : block

   

The reson to why the tooltip content element looks strange in this image is becourse it tries to fit it on a space of 14x15 (the small image that triggers the tooltip).

[Craig]

Sounds like a styling problem rather than a qTip bug... why do you have display: none; set if you don't want it hidden?

[SnowJim]

(16th February 20:40)Craig Wrote:  Sounds like a styling problem rather than a qTip bug... why do you have display: none; set if you don't want it hidden?

I have not come around to test this some more, this is how the html looks like :

HTML Code

<div class="tooltip">
     <div class="content">
                <div class="icon"> </div>
                <div class="text">Bilder som du redan laddat upp till denna annons. För att tabort uppladdad bild, tryck på krysset intill den du önskar tabort</div>
             </div>
</div>

And this is the styles:

CSS Code

.tooltip {
background-image: url("Images/Common/Icons/questionMark_15x14.png");
background-repeat: no-repeat;
cursor: help;
display: block;
float: left;
height: 100px;
margin-left: 2px;
width: 200px;
}

CSS Code

.tooltip .content {
    display: block;
}

CSS Code

.tooltip .content .icon {
    background-image: url("Images/Common/Icons/questionMark_21x21.png");
    float: left;
    height: 21px;
    width: 21px;
}

CSS Code

.tooltip .content .text {
    background-color: Blue;
    float: left;
}

And here is how it is rendered

   

Pleas note that the content class is set to display : block just to show how the tooltip supose to look like.

Do you have any idea why this does not work?