Pergunta

Estou tentando colocar um link dentro de uma dica de ferramenta (qtip) que, quando clicada, mostra o conteúdo de uma div oculta dentro de uma caixa de luz (nyromodal). Tag regular de âncora não em uma dica de ferramenta links para o conteúdo de abertura da Div em uma caixa de luz com sucesso.

Código: http://jsbin.com/omafe/2/

Pode ser necessário copiar o código para o bloco de notas, salvar como HTML e abrir o arquivo. (JSBIN não carregando arquivos de plug -in externos JS)

Qualquer ajuda seria muito apreciada. Obrigado.

Foi útil?

Solução

Parece que o QTIP está armazenando uma cópia de 'Div.TipContent' na memória (uma variável).

Descobri isso removendo a classe "Hidden" da div. Quando você faz isso, você verá que tem dois divs. Um ainda na página e outro usado pelo QTIP da memória.

Como solução, você pode ter que modificar o QTIP para aplicar $('a').nyroModal(); Para os nós do link, ele renderiza da memória.

EDITAR

Para adicionar o efeito da caixa de luz aos seus links QTIP, modifique o seu inicializador QTIP da seguinte forma:

$('div.tooltip').qtip({
    content: $('div.tipcontent').html(),
    position: {
        corner: {
        target: 'topRight',
        tooltip: 'bottomRight'
        }
    },
    style: { 
        width: 150,
        padding: 10,
        background: 'silver',
        color: 'black',
        tip: 'bottomMiddle',
    },
    hide: {
        fixed: true
    },
    api: {
        onShow: function() { $('a').nyroModal(); }
    }
});

Observe a chamada da API para onshow. Isso reaplicará o Nyromodal a todos os links da página, cobrindo o conteúdo gerado dinamicamente do QTIP. Provavelmente, há uma maneira mais eficiente de restringir o seletor de jQuery ao link específico gerado pelo QTIP, mas isso deve iniciar pelo menos você.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top