Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Eu utilizo o easytooltip jquery para colocar os "baloes" de comentário em minha pagina
funciona perfeitamente nos elementos que eu defino no comando
$("a,.classButtons, .classButtons2, .classBotoesNavegacao").easyTooltip();
tudo que tiver o elemento title vai ser mostrado como tooltip
O problema vem agora...tenho um webservice que retorna uma tabela, a mesma contem alguns tooltips só que o mesmo não mostra quando passo o mouse sobre os links da tabela
peguei o codigo e copiei em um arquivo a parte, funciona
Segue a chamada do serviço
$.ajax({
type: 'POST'
//Caminho do WebService + / + nome do metodo
, url: "../teste/teste.asmx/teste1"
, contentType: 'application/json; charset=utf-8'
, dataType: 'json'
//Abaixo adicione as variáveis caso haja alguma.
, data: "{id:'" + $("#idA").val() + "', data:'" + $("#txtData").val() + "'}"
, success: function (data, status) {
//Caso não ocorra nenhum tipo de erro:
$('.divWEB').html(data.d);
//alert(data.d);
}
, error: function (xmlHttpRequest, status, err) {
//Caso ocorra algum erro:
//$('.valor').html('Ocorreu um erro');
alert('Erro');
}
});
as tag's title fora dessa div onde carrego a tabela funcionam, o resto não
obrigado desde já
Abraços
Tem a possibilidade de instanciar isso?
Sim, ache esses elementos 'manualmente', e então faça o bind do evento para eles, assim que os colocar na página.
Segue o código com o bind, mas creio que eu esteja fazendo errado, alguem pode me dar um exemplo
$(document).ready(function () {
$("a,.classButtons, .classButtons2, .classBotoesNavegacao,").easyTooltip();
$(".help ,.exames, #tel").colorbox({ width: "90%", height: "90%", iframe: true });
$('input:text').setMask();
if ($("#idA").val() != "" && $("#txtData").val() != "") {
GetData();
$("a").bind().easyTooltip;
}
});
function GetData() {
$.ajax({
type: 'POST'
//Caminho do WebService + / + nome do metodo
, url: "../teste/teste.asmx/teste1"
, contentType: 'application/json; charset=utf-8'
, dataType: 'json'
//Abaixo adicione as variáveis caso haja alguma.
, data: "{id:'" + $("#idA").val() + "', data:'" + $("#txtData").val() + "'}"
, success: function (data, status) {
//Caso não ocorra nenhum tipo de erro:
$('#resultado').html(data.d);
//alert(data.d);
}
, error: function (xmlHttpRequest, status, err) {
//Caso ocorra algum erro:
//$('.valor').html('Ocorreu um erro');
alert('Erro');
}
});
}você tem q fazer o bind nos elementos que você quiser da variavel data
e 'bind' foi a forma de dizer, eu não estava me referindo a esta função em especifico.
Estou utilizando o seguinte codigo para ligar ao data.d o tooltip está funcionando com 2 probleminhas
$(document).ready(function () {
$("a,.classButtons, .classButtons2, .classBotoesNavegacao").easyTooltip();
$(".help ,.exames, #tel").colorbox({ width: "90%", height: "90%", iframe: true });
$('input:text').setMask();
if ($("#id").val() != "" && $("#txtData").val() != "") {
GetData();
}
$('.aDiv').delegate(".Div a", "hover", function () {
$("a").easyTooltip();
});
});
function GetData() {
$.ajax({
type: 'POST'
//Caminho do WebService + / + nome do metodo
, url: "../teste/teste.asmx/teste1"
, contentType: 'application/json; charset=utf-8'
, dataType: 'json'
//Abaixo adicione as variáveis caso haja alguma.
, data: "{id:'" + $("#idA").val() + "', data:'" + $("#txtData").val() + "'}"
, success: function (data, status) {
//Caso não ocorra nenhum tipo de erro:
$('.Div').html(data.d);
//alert(data.d);
}
, error: function (xmlHttpRequest, status, err) {
//Caso ocorra algum erro:
//$('.valor').html('Ocorreu um erro');
alert('Erro');
}
});
}
Problema 1 - Quando passo o mouse e primeira vez o evento nao funciona, ele funciona a segunda vez que passo o mouse
Problema 2 - Quando funciona o tooltip na hora que ele aparece cria uma barra de rolagem que nao era pra ter...
Fala Pessoal!
Consegui resolver o problema 1 alterando o código segue abaixo
$(document).ready(function () {
$("a,.classButtons, .classButtons2, .classBotoesNavegacao").easyTooltip();
$(".help ,.exames, #tel").colorbox({ width: "90%", height: "90%", iframe: true });
$('input:text').setMask();
if ($("#id").val() != "" && $("#txtData").val() != "") {
GetData();
}
// $('.Div').live(".Div a", "hover", function () {
// $(this).easyTooltip();
// });
});
function GetData() {
$.ajax({
type: 'POST'
//Caminho do WebService + / + nome do metodo
, url: "../teste/teste.asmx/teste1"
, contentType: 'application/json; charset=utf-8'
, dataType: 'json'
//Abaixo adicione as variáveis caso haja alguma.
, data: "{id:'" + $("#idA").val() + "', data:'" + $("#txtData").val() + "'}"
, success: function (data, status) {
//Caso não ocorra nenhum tipo de erro:
$('.Div').html(data.d);
$('.Div').live('hover', function () {
$("a").easyTooltip();
});
//alert(data.d);
}
, error: function (xmlHttpRequest, status, err) {
//Caso ocorra algum erro:
//$('.valor').html('Ocorreu um erro');
alert('Erro');
}
});
}
O único Problema agora é a scrollbar que aparece quando passo o mouse no link
aí é erro de css.
poste um link para o site, e analise com o firebug.
Não tenho site para postar o link, é local no pc...baixei o firebug, vou tentar aprender a usar, mas o interessante é que antes de passar o mouse na tabela as outras tooltips funcionam normalmente sem criar a barra de rolagem depois que passo o mouse na barra onde usei o evento para dar o bind tudo começa a criar a barra de rolagem no evento hover
porque você trouxe esse conteudo com ajax, e o objeto não foi instanciado para esses elementos novos.