javascript - How to set the tip dimensions with jQuery qTIp? - Stack Overflow

admin管理员组

文章数量:1278886

I'm having some trouble with modifying qTip's tip size (x,y). I tried to add the style: { tip: { x:2,y:2 } } in all sorts of ways, but failed.

How can I add it to the following script?

  // Status Tooltips Style
  $.fn.qtip.styles.statusTooltips = {
    background: '#333333',
    color: 'white',
    textAlign: 'center',
    border: {
      width: 1,
      radius: 5,
      color: '#333333'
    },
    tip: 'leftMiddle',
    name: 'dark'
  }

  // Status Tooltips Init
  $('.status[title]').qtip({
    style: 'statusTooltips',
    position: {
      corner: {
         target: 'rightMiddle',
         tooltip: 'leftBottom'
      }
    }
  });

I'm having some trouble with modifying qTip's tip size (x,y). I tried to add the style: { tip: { x:2,y:2 } } in all sorts of ways, but failed.

How can I add it to the following script?

  // Status Tooltips Style
  $.fn.qtip.styles.statusTooltips = {
    background: '#333333',
    color: 'white',
    textAlign: 'center',
    border: {
      width: 1,
      radius: 5,
      color: '#333333'
    },
    tip: 'leftMiddle',
    name: 'dark'
  }

  // Status Tooltips Init
  $('.status[title]').qtip({
    style: 'statusTooltips',
    position: {
      corner: {
         target: 'rightMiddle',
         tooltip: 'leftBottom'
      }
    }
  });

• javascript
• jquery
• tooltip
• qtip

Share Improve this question Follow edited Jul 8, 2010 at 22:56 Brock Adams 93.6k2323 gold badges241241 silver badges304304 bronze badges asked Jul 6, 2010 at 7:33 Tomer LichtashTomer Lichtash 9,2621616 gold badges5757 silver badges7373 bronze badges 1

• 1 qTip's documenation on this: craigsworks./projects/qtip/docs/reference/#style – Tomer Lichtash Commented Jul 6, 2010 at 7:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

it's simpe enough:

$("#mytip").qtip({style: { tip: { size: { x: 10, y: 10}} }});

http://craigsworks./projects/qtip/docs/tutorials/#tips

For qtip 2, you can just set the width and height properties of the tip object:

$("#mytip").qtip({
    style: {
        tip: {
            width: 10,
            height: 10
        }
    }
});

See http://qtip2./plugins#tips.width

Got it!

  $('.status[title]').qtip({
    style: {background:'#333333',
      color:'white',
      textAlign:'center',
      border:{width: 1, radius: 5, color: '#333333'},
      tip:{corner:'leftMiddle',size: { x:6,y:10 }}
    },
    position: {corner: {target:'rightMiddle',tooltip:'leftBottom'}}
  });

Thanks, StackOverflow, for being an occasional rubber duck :)

本文标签： javascriptHow to set the tip dimensions with jQuery qTIpStack Overflow