2016-08-12 3 views
1

qtip2 positioning problem Я пытаюсь разместить qTips под div, как показано выше. Концы имеют ту же ширину, что и контейнер, который содержит цели (A, B, C). Я пытаюсь настроить наконечник непосредственно под контейнером, но я хочу, чтобы угол располагался относительно цели.qTip2: позиционирование наконечника и позиционирование угла

Как настроить qTip2 для получения этого выравнивания?

Target B прост ...

position: { 
     my: 'top center', 
     at: 'bottom center' 
    }, 
    style: { 
     width: 350, 
     tip: { 
      height: 10, 
      width: 12 
     } 
    }, 

но Цели А и С дают мне неприятности

Если добавить некоторые style.tip конфиги для Target A:

position: { 
     my: 'top center', 
     at: 'bottom center' 
    }, 
    style: { 
     width: 350, 
     tip: { 
      height: 10, 
      width: 12, 
      corner: 'top left', 
      mimic: 'center' 
     } 
    }, 

угол не расположен под центром цели ... он выключен для левой стороны

Если я добавлю tip.offset, то угол, кажется, будет смещен правильно, но весь наконечник смещается на равную величину, больше не выравнивается с контейнером.

position: { 
     my: 'top center', 
     at: 'bottom center' 
    }, 
    style: { 
     width: 350, 
     tip: { 
      height: 10, 
      width: 12, 
      corner: 'top left', 
      mimic: 'center', 
      offset: 60 // about half the width of Target A 
     } 
    }, 

Как настроить qTip2, чтобы получить этот наконечник выровненной с контейнером, и угол выровненный с целью?

ответ

0

Вот как я ее решил:

для цели А

position: { 
    my: 'top center', 
    at: 'bottom center' 
}, 
style: { 
    width: 350, 
    tip: { 
     height: 10, 
     width: 12, 
     offset: -120 // offset from the center 
    } 
}, 

для Target B

position: { 
    my: 'top center', 
    at: 'bottom center' 
}, 
style: { 
    width: 350, 
    tip: { 
     height: 10, 
     width: 12, 
     offset: 120 // offset from the center 
    } 
}, 
Смежные вопросы