Подсказка jQuery-UI отображается после второго наведения мыши

Question

Подсказка jQuery-UI отображается после второго наведения мыши

0

У меня есть этот код:

(...)
if (data.hasSentMessages === true){
  $("#sentMessages")
    .parent()
    .removeClass("ui-state-disabled");
} else {
  $("#sentMessages")
    .parent()
    .addClass("ui-state-disabled");
}

И тогда, если элемент отключил класс, я хочу показать, почему элемент отключен в jQuery-UI Tooltip. Но, к сожалению, это проявляется после второго события mouseover. Когда я читаю это: всплывающая подсказка, не показывающая при первом наведении мыши, создаю что-то вроде этого:

$("#sentMessages").tooltip({disabled: !($("#sentMessages").parent().hasClass("ui-state-disabled"))});
if($("#sentMessages").data("tooltip") === false){
  $("#sentMessages").tooltip({disabled: !($("#sentMessages").parent().hasClass("ui-state-disabled"))}).triggerHandler("mouseover");
}

Это условие, если виджет не инициализирован, должен вручную запустить событие mouseover, но, к сожалению, он все еще не работает. Я буду очень рад, если кто-то захочет мне помочь - спасибо заранее.

Существует упрощенный Fiddle: jsFiddle, который показывает проблему, там вы можете видеть, что вторая подсказка хороша, но в первую очередь похожа на стандартную "подсказку браузера".

Radek Anuszewski 04 апр. 2014, в 23:33

Источник

0

не могли бы вы предоставить скрипку?
Anubhav 04 апр. 2014, в 21:24
0

@Anubhav, конечно, есть скрипка -> jsfiddle.net/v7Xnh/2 Это не работает, как мой веб, но там также вы можете увидеть, что при наведении мыши на второй курсор работает лучше, чем на первом
Radek Anuszewski 04 апр. 2014, в 21:31

Теги:

javascript

jquery

html

css

jquery-ui

2 ответа

0

на основе вашего примера e.stopImmediatePropagation(): добавьте e.stopImmediatePropagation() в событие mouseover, см. обновленную скрипту:

Vickel 04 апр. 2014, в 19:12

0

Это не ожидаемое поведение - если вы видите мой Fiddle, вы можете видеть, что после второго события mouseenter всплывающая подсказка отображается под элементом <a>, но в приложении есть всплывающая подсказка jQueryUI - и то, как я хочу, подсказка будет вести себя. С e.stopImmediatePropagation () каждый раз, когда я вижу "стандартную" подсказку браузера.
Radek Anuszewski 04 апр. 2014, в 21:55
0

прежде чем я обновлю свой ответ, проверьте здесь, если это то, что вы притворяетесь ?: jsfiddle.net/v7Xnh/4
Vickel 04 апр. 2014, в 22:06
0

Нет, ключ был в том, что в первый раз всплывающая подсказка ведет себя так, как если бы он не инициализировался (она показывает просто всплывающую подсказку, как если бы вы поместили указатель мыши на «самую старую» или «активную» вкладку над своим первым насвером), а во второй - показывает правильный интерфейс всплывающая подсказка и до обновления есть то же самое - но теперь я поместил всплывающую подсказку инициализации в другом месте (в mouseenter () значка, который после щелчка показывает меню с тегами <a>), и, похоже, это работает (это не решение, но ... Но это работает :)) Спасибо, что нашли время для моей проблемы! :)
Radek Anuszewski 04 апр. 2014, в 22:17

Показать ещё 1 комментарий

Ещё вопросы

не могли бы вы предоставить скрипку?
@Anubhav, конечно, есть скрипка -> jsfiddle.net/v7Xnh/2 Это не работает, как мой веб, но там также вы можете увидеть, что при наведении мыши на второй курсор работает лучше, чем на первом
Это не ожидаемое поведение - если вы видите мой Fiddle, вы можете видеть, что после второго события mouseenter всплывающая подсказка отображается под элементом <a>, но в приложении есть всплывающая подсказка jQueryUI - и то, как я хочу, подсказка будет вести себя. С e.stopImmediatePropagation () каждый раз, когда я вижу "стандартную" подсказку браузера.
прежде чем я обновлю свой ответ, проверьте здесь, если это то, что вы притворяетесь ?: jsfiddle.net/v7Xnh/4
Нет, ключ был в том, что в первый раз всплывающая подсказка ведет себя так, как если бы он не инициализировался (она показывает просто всплывающую подсказку, как если бы вы поместили указатель мыши на «самую старую» или «активную» вкладку над своим первым насвером), а во второй - показывает правильный интерфейс всплывающая подсказка и до обновления есть то же самое - но теперь я поместил всплывающую подсказку инициализации в другом месте (в mouseenter () значка, который после щелчка показывает меню с тегами <a>), и, похоже, это работает (это не решение, но ... Но это работает :)) Спасибо, что нашли время для моей проблемы! :)

Daniel Tedman · Accepted Answer · 2014-04-04T23-04-00.000Z

В вашей скрипке инициализация всплывающей подсказки происходит в функции обратного вызова мыши. Это будет означать, что всплывающая подсказка не создается только после первого события mouseover.

Во-вторых, событие mouseover встроено в то, как работает всплывающая подсказка jQueryUI. Таким образом, вы можете удалить код мыши.

В-третьих, вы упомянули, что всплывающая подсказка должна отображаться только тогда, когда родительский элемент имеет класс ui-state-disabled.

Посмотрите результат на JSFiddle.

// construct a tooltip for each sentMessages then listen for the 
// tooltipopen event an evaluate if it should show the tooltip
// or not
$("#sentMessages").tooltip().on('tooltipopen', function(){
    if ($(this).parent().hasClass('ui-state-disabled')){
        $(this).tooltip("enable");

    } else {
        $(this).tooltip("disabled");
    }
});

// comment out this line to replicate a non error state
$("#sentMessages").parent().addClass("ui-state-disabled");

Надеюсь, это поможет.