Всплывающая подсказка Ext Js, которая остается при наведении курсора мыши на

#animation #extjs #tooltip

#Анимация #extjs #всплывающая подсказка

Вопрос:

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

 function createTooltp(toolTipId) {
 tooTip = new Ext.ToolTip({
 target: toolTipId,            //The button
 anchor: 'left',
 autoWidth: true,
 autoHeight: true,
 closable: false,
 autoHide: true,
 autoHeight : true,
 closable: false,
 contentEl: 'content-tip'
 });
tooTip.show();
}

Теперь, когда пользователь отводит курсор, очевидно, что он будет скрываться, поскольку я упоминал autoHide:true, .
Но когда пользователь наводит курсор на фактическую всплывающую подсказку, которая отображается. Я хочу, чтобы эта всплывающая подсказка была там, пока мышь не окажется над ней, и скрывалась, когда мышь не находится на цели (кнопке) или на самой всплывающей подсказке. Как этого можно достичь?

Ответ №1:

Не полагайтесь на Ext, чтобы скрыть всплывающую подсказку для вас (автоматическое скрытие: false). Вместо этого запустите отложенное скрытие с помощью window.setTimeout, когда вы покидаете цель всплывающей подсказки и когда вы покидаете всплывающую подсказку, но отмените скрытие, если вы снова наведете курсор на всплывающую подсказку. Таким образом, она будет скрываться только тогда, когда вы не находитесь во всплывающей подсказке через 500 мс.

 var toolTip = Ext.create('Ext.tip.ToolTip', {
    target: targetId,
    html: 'ToolTip',
    anchor: 'left',
    dismissDelay: 0,
    showDelay: 0,
    autoHide: false
});

toolTip.on('show', function(){

    var timeout;

    toolTip.getEl().on('mouseout', function(){
        timeout = window.setTimeout(function(){
            toolTip.hide();
        }, 500);
    });

    toolTip.getEl().on('mouseover', function(){
        window.clearTimeout(timeout);
    });

    Ext.get(targetId).on('mouseover', function(){
        window.clearTimeout(timeout);
    });

    Ext.get(targetId).on('mouseout', function(){
        timeout = window.setTimeout(function(){
            toolTip.hide();
        }, 500);
    });

});

1. это хороший дизайн, но есть ошибка. Вам необходимо сбросить время ожидания при наведении курсора мыши на цель. Если нет, то при закрытии подсказки щелчком в любом другом месте экрана таймауты не сбрасываются. поэтому, если вы снова наведете курсор, подсказка будет закрыта < 500 — или с любой другой установленной вами задержкой. ‘код’

Ответ №2:

Мои два цента: у меня была задача добавить такое же поведение для всплывающих подсказок внутри столбцов панели сетки, и у нее нет способа передать конфигурацию или всплывающие подсказки внутри нее (или, возможно, я пропустил это в документах и при чтении источников, пожалуйста, прокомментируйте, если у меня был). Итак, я решил это, добавив небольшое переопределение в свое приложение

 Ext.define('App.overrides.ToolTip', {
    override: 'Ext.tip.ToolTip',
    dismissDelay: 0
});

Ответ №3:

Попробуйте это:

 function createTooltp(toolTipId) {
    var tooTip = new Ext.ToolTip({
        target: toolTipId, // The button
        anchor: 'left',
        showDelay: 0,
        hideDelay: 0,
        trackMouse: true
    });

    tooTip.show();
}

Узнайте больше из этой ссылки: Всплывающая подсказка

1. В списке элементов. DismissDelay не сработает. Поскольку это удерживало бы всплывающую подсказку в течение 15 секунд, пока пользователь может находиться на другом элементе.

Ответ №4:

Я сделал это с обходным путем (jQuery). И использовал Span и CSS для создания моей собственной всплывающей подсказки.