Почему эта подсказка jQuery UI работает так, как ожидалось?

Question

Я работаю над этим буквально через несколько дней. У меня есть приложение, использующее jQuery UI для datepickers. Теперь мне также нужны расширенные подсказки, поэтому я был рад видеть, что виджет всплывающей подсказки добавлен в jQueryUI.

Мне все еще нужно поддерживать более старые версии IE, поэтому я не могу использовать jQuery 2.0. Я обновился до jQuery 1.9.1 и jQuery UI 1.10.3.

Во всяком случае, всплывающая подсказка не ведет себя совсем как я ожидаю. Я создаю подсказки, с помощью этого кода:

$(document).ready(function() { 
     $('.tooltipStyle').tooltip({ 
      position: { my: "top left", at: "bottom center" }, 
      content: function() { 
       return "This tooltip is a function return value with <b>HTML content</b>"; 
      } 
     }); 
    }); 

Полный демо на jsFiddle: http://jsfiddle.net/2agHC/4/. (Обратите внимание, что я использовал внешние ресурсы слева для загрузки соответствующих версий jQuery и jQuery UI.)

Во-первых, я не могу заставить свойство position работать. Я ожидаю, что всплывающая подсказка появится чуть ниже элемента управления, к которому он прикреплен, причем верхний левый угол центрирован на элементе управления. (Я сделал серый, чтобы он был виден.) Однако всплывающая подсказка появляется напротив левого края окна.

Во-вторых, я должен мыши на DIV для того, чтобы в подсказке, чтобы показать, в то время как я ожидал, что он появится с висения.

Я чувствую, что мне не хватает чего-то серьезного в том, как использовать всплывающую подсказку, но, как я уже сказал, я был в этом уже несколько дней. Может ли кто-нибудь объяснить, что мне не хватает?

Answer 1

Вы хотите, чтобы это было так? jsfiddle

$(document).ready(function() { 
    $('.tooltipStyle').tooltip({ 
     position: { my: "left top", at: "bottom" }, 
     content: function() { 
      return "This tooltip is a function return value with <b>HTML content</b>"; 
     } 
    }); 
}); 

Если это не ваше желаемое поведение пожалуйста ответьте. Также полезно ознакомиться с документацией по утилите jQuery UI Position.

Я думаю, что щелчок, о котором вы говорили, был только там, потому что всплывающая подсказка висела прямо над элементом. Хотя в вашем примере мне не нужно было щелкнуть ... всплывающая подсказка всплывает, сразу же скрывается, а затем снова отображается.

Чтобы сделать его полным (например, экстракт eclps' из доку)

мой (по умолчанию: "центр")

Тип: String

Определяет, какая позиция на элементе позиционируется для выравнивания с целевым элементом: выравнивание по горизонтали по вертикали. [...]

Допустимые горизонтальные значения: «левый», «центральный», «правый». Допустимые вертикальные значения: «верх», «центр», «нижний». Пример: «левый верх» или «центр центра». Каждое измерение также может содержать смещения в пикселях или процентах, например, «right + 10 top-25%». Процент смещения относительно расположенного элемента.

Answer 2

jQuery UI Position docs С для «моего»:

Определяет, какое положение на элементе позиционируются для согласования с целевого элемента: «по горизонтали по вертикали» выравнивание. [...] Допустимые горизонтальные значения: «левый», «центральный», «правый». Допустимые вертикальные значения : «верх», «центр», «нижний». Пример: «левый верх» или «центр центр».

Вам необходимо поменять свои значения позиции. Как показано в ответе SirDerpington.

position: { my: "left top" },