JQuery Qtip - Link para uma div oculta de dentro de uma dica de ferramenta
-
27-09-2019 - |
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.
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ê.