Ext Js Tooltip, чтобы остаться при наведении курсора - PullRequest
Новая
       39

Ext Js Tooltip, чтобы остаться при наведении курсора

3 голосов
/ 28 апреля 2011

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

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,. Но когда пользователь наводит курсор на актуальную подсказку, которая отображается. Я хочу, чтобы всплывающая подсказка оставалась там до тех пор, пока мышь не будет на ней сверху, и скрывалась, когда указатель мыши не находится на цели (кнопке) или на самой подсказке. Как этого достичь?

Ответы [ 4 ]

10 голосов
/ 08 ноября 2011

Не полагайтесь на Ext, чтобы скрыть подсказку для вас (autoHide: 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 голос
/ 29 апреля 2011

Попробуйте: 

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

    tooTip.show();
}

См. Это:

TooolTip

0 голосов
/ 31 июля 2016

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

Ext.define('App.overrides.ToolTip', {
    override: 'Ext.tip.ToolTip',
    dismissDelay: 0
});
0 голосов
/ 07 июня 2011

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

...