Qtip newbie

[daltman1967]

Can someone please post a COMPLETE piece of code showing how to implement qtip?

I have this:

JS Code

$("jqueryselector").qtip({
   content: 'my text',
   fixed: true,
   position: 'bottom'
   style: { 
      border: {
         width: 3,
         radius: 8,
         color: '#6699CC'
      },
      width: 200
}  });

but I don't know how to link it in on the page. Also, I want to know if I can have one section in justified, then the next line right-aligned (within the same tooltip, as such.

the swift brown fox
jumped over the lazy
dog.
- Anonymous

Help!!

[Craig]

Well your code is all over the place heh! Take a look here for the proper syntax:

JS Code

$("jqueryselector").qtip({
   content: 'my text',
   position: {
      my: 'bottom left',
      at: 'bottom left'
   },
   hide: { 
      fixed: true
   },
   style: { 
      // Border is no longer support in 2.0, unless you're wanting to use 1.0? This is the 2.0 forum
      border: {
         width: 3,
         radius: 8,
         color: '#6699CC'
      },
      width: 200
   }  
});

The styling can be done via CSS:

CSS Code

.ui-tooltip-wrapper .right{
   text-align: right;
}
 
.ui-tooltip-wrapper .justify{
   text-align: justify;
}

Then just add the relevant class to your content elements.

[daltman1967]

Ok, I managed to get a tip on my screen, positioned how I want, and with the foreground & background colors I want. The last problem to solve is the text itself.

JS Code

$(document).ready(function()
  { 
    // Match all link elements with href attributes within the content div 
    $('#claimform a[rel=tip]').qtip(
      { 
        style:
          { 
            border:
              {
                width: 6,
                radius: 8,
                color: '#0000FF'
              },
            width: 250, 
            color: 'black', 
            background:'#FFFF99', 
            name: 'green' 
          }, 
        position:
          { 
            corner:
              {
                target: 'rightMiddle', 
                tooltip: 'leftMiddle' 
              }, 
            adjust: { x: -100, y: 100 } 
          } 
      }); 
   });

HTML Code

<div id="claimform">
<a href="#" rel="tip" title="This is my text hereline 2">some text</a>
</div>

the words 'some text' appear on the screen, and the Title appears as the qtip when you hover over the words. This is just right.

But I want the first line, 'This is my text here' to be justified and the second line 'line 2' to be right aligned. I tried adding a <span></span> with css styling in the title, but that didn't work. Any ideas?