AjudaFM
Bem-Vindo
não é obrigado se registra para ver nosso tutoriais
agora se quiser tirar uma duvida registre-se
Bem vindo ao AJUDAFM 4.0
Cadastre-se agora para ter acesso a todos os nossos recursos. Uma vez cadastrado e logado, você será capaz de criar tópicos, postar respostas a tópicos já existentes, a reputação de seus companheiros, começar seu próprio mensageiro privado, atualizações de status post, gerir o seu perfil e muito mais. Esta mensagem será removida assim que tiver logado no AJUDAFM 4.0
Entrar Cadastre-se
AjudaFM

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [TUTORIAL] Tooltip elegante v² em Qua Dez 12, 2012 10:30 pm

Mensagens : 100
CashFM : 264
Reputação : 21
inscrição : 02/07/2012
Idade : 19

avatar

Maxinho

AdminFM

AdminFM

Código desenvolvido por Max Kyle | AjudaFM
Todos direitos reservados, não poste no seu fórum (com exceção do Henrique RMBR criador da primeira versão)



Tooltip Elegante v²

Nesse tutorial estarei ensinando como criar efeito de Tooltip elegante v² código desenvolvido por Max Kyle.


1º - Adicionar



Código:
    .tipsy {
    padding: 5px;
    font-size: 10px;
    position: absolute;
    z-index: 999;

    }

    .tipsy-inner {
    padding: 5px 8px 4px 8px;
    background-color: black;
    color: white;
    max-width: 200px;
    text-align: center;
    }

    .tipsy-inner {
    border-radius: 3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    }

    .tipsy-arrow {
    position: absolute;
    background: url('http://onehackoranother.com/projects/jquery/tipsy/stylesheets/../images/tipsy.gif') no-repeat top left;
    width: 9px;
    height: 5px;
    }

    .tipsy-n .tipsy-arrow {
    top: 0;
    left: 50%;
    margin-left: -4px;
    }

    .tipsy-nw .tipsy-arrow {
    top: 0;
    left: 10px;
    }

    .tipsy-ne .tipsy-arrow {
    top: 0;
    right: 10px;
    }

    .tipsy-s .tipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -4px;
    background-position: bottom left;
    }

    .tipsy-sw .tipsy-arrow {
    bottom: 0;
    left: 10px;
    background-position: bottom left;
    }

    .tipsy-se .tipsy-arrow {
    bottom: 0;
    right: 10px;
    background-position: bottom left;
    }

    .tipsy-e .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    right: 0;
    width: 5px;
    height: 9px;
    background-position: top right;
    }

    .tipsy-w .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    left: 0;
    width: 5px;
    height: 9px;
      }

2º - Adicionar



Marcar:


Código:
var versionMinor=parseFloat(navigator.appVersion),versionMajor=parseInt(versionMinor),IE=document.all&&!window.opera&&7>versionMajor,IE7=document.all&&!window.opera&&7<=versionMajor,OP=window.opera,FF=document.getElementById,NS=document.layers;function get_item(a,c){if(IE)return c?window.opener.document.all[a]:document.all[a];if(FF)return c?window.opener.document.getElementById(a):document.getElementById(a);if(NS)return c?window.opener.document.layers[a]:document.layers[a]}var current_tooltip;function show_tooltip(a,c,d){var b=get_item("tooltip");b||(b=document.createElement("div"),b.setAttribute("id","tooltip"),document.body.appendChild(b));b.style.zIndex=100;b.style.position="absolute";b.innerHTML=d?'<p class="header">'+d+"</p><p>"+c+"</p>":"<p>"+c+"</p>";b.style.visibility="visible";a.onmousemove=move_tooltip;a.onmouseout=function(){b.style.visibility="hidden"};a.title=""}var offsetxpoint=-60,offsetypoint=20,real_body=document.compatMode&&"BackCompat"!=document.compatMode?document.documentElement:document.body,real_body=document.documentElement?document.documentElement:document.body;function move_tooltip(a){var c=!IE?a.pageX:event.clientX+real_body.scrollLeft,d=!IE?a.pageY:event.clientY+real_body.scrollTop,b=IE&&!window.opera?real_body.clientWidth-event.clientX-offsetxpoint:window.innerWidth-a.clientX-offsetxpoint-20,e=IE&&!window.opera?real_body.clientHeight-event.clientY-offsetypoint:window.innerHeight-a.clientY-offsetypoint-20,f=0>offsetxpoint?-1*offsetxpoint:-1E3;current_tooltip=get_item("tooltip");current_tooltip.style.left=b<current_tooltip.offsetWidth?IE?real_body.scrollLeft+event.clientX-current_tooltip.offsetWidth+"px":window.pageXOffset+a.clientX-current_tooltip.offsetWidth+"px":c<f?"5px":c+offsetxpoint+"px";current_tooltip.style.top=e<current_tooltip.offsetHeight?IE?real_body.scrollTop+event.clientY-current_tooltip.offsetHeight-offsetypoint+"px":window.pageYOffset+a.clientY-current_tooltip.offsetHeight-offsetypoint+"px":d+offsetypoint+"px"}function searchtopic(nguonF,soF,dichF){$("#proLastLoad").show();$.ajax({url:nguonF,success:function(data){var chondulieu=".topic-title:not('.topic-title:contains(\'»\')'):lt("+soF+")";if($(data).find(chondulieu).length==0){$(dichF).html('<p><font face="Courier New"><font color="red">Không tìm thấy bài viết .</font></font></p>');$("#proLastLoad").hide()}else{$("#proLastLoad").hide();$("#recentnew .latest_topics").empty();$(data).find(chondulieu).find(".topictitle, .tooltipFMvi").appendTo(dichF);$(dichF+' .topictitle').wrap("<li></li>");var ti;for(ti=0;ti<soF;ti++){var it=$(dichF+' a.topictitle:eq('+ti+')');var lastUx=it.parent().next().find('p:eq(6)>strong').html();var linkUx=it.parent().next().find(".lastlink-FMvi a").attr("href");var trangthai=it.parent().next().find('p:eq(3)>font').text();var chuyenmuc=it.parent().next().find('p:eq(2)>font').html();var traloi=it.parent().next().find('p:eq(5)>font').html();var luotxem=it.parent().next().find('p:eq(4)>font').html();if(langEV()){var dabikhoa="This topic is locked";var dacomoi="New posts"}else{var dabikhoa="Chủ đề này đã bị khóa";var dacomoi="Bài viết mới"}if(trangthai.search(dabikhoa)!=-1){var imgUx='http://i48.servimg.com/u/f48/16/58/89/73/locked10.png'}else if(trangthai.search(dacomoi)!=-1){var imgUx='http://i48.servimg.com/u/f48/16/58/89/73/post_n10.gif'}else{var imgUx='http://i48.servimg.com/u/f48/16/58/89/73/post_o10.png'};it.replaceWith('<span onmouseover="show_tooltip(this, $(this).parents(\'li\').next().html(), \'\')" class="leftrecent"><a href="'+linkUx+'" class="topictitle">'+it.text()+'</a></span><span class="imgstatus"><img width="10px" src="'+imgUx+'" /></span><span class="rightrecent">'+lastUx+'</span><span class="showpost"><a class="firstTopic" onclick="openWin(this.href.replace(\'#\', \'?showpost=\'), 1000, 500);return false" href="'+linkUx+'"> ▼</a></span><span class="viewfmvi">'+luotxem+'</span><span class="repfmvi">'+traloi+'</span><span class="lastcate">'+chuyenmuc+'</span>')}}},error:function(jqXHR,textStatus,errorThrown){$(dichF).html('<p><font face="Courier New"><font color="red">Có lỗi xảy ra trong quá trình tải dữ liệu.</font></font></p>')}})}$(function(){searchtopic('/search?search_author=*_*&search_keywords','23','#recentnew ul');$("#changeviewrep").change(function(){$(".viewrep").hide();$("#"+$(this).val()).show()});$("#changeposter").change(function(){$(".top-vi").hide();$("#"+$(this).val()).show()});$("#most_viewed li:gt(10),#most_active li:gt(10),#top_posters li:gt(10),#active_starters li:gt(10),#users_week li:gt(10),#users_month li:gt(10)").hide();var u;for(u=0;u<20;u++){var numelat=$(".rightnumber:eq("+u+")");numelat.text(numelat.text().slice(numelat.text().lastIndexOf("-")+1))}$("#left").fadeIn(1000);$("#changeFMvi").html($("#pun-about select[name='selected_id']").html())});eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(4(g){m 14=K.2a(\'27\');6(!14)t;m 22=\'©1Z 1X 1W - 1V.1U - 1T 1S 1q.\';m 17=$(14).B("1Q").1O(/[0-9]+/);$(\'1N a[1M^="/1K"]\').B(\'I-1H\',\'\'+17+\'\')});(4(c){4 a(d){6(d.B("o")||H(d.B("12-o"))!="11"){d.B("12-o",d.B("o")||"").1D("o")}}4 b(e,d){3.$u=c(e);3.7=d;3.F=x;a(3.$u)}b.1C={13:4(){m g=3.1m();6(g&&3.F){m f=3.z();f.1B(".5-1a")[3.7.N?"N":"1y"](g);f[0].1w="5";f.Z().M({r:0,p:0,V:"1v",1n:"1o"}).1u(K.1t);m j=c.U({},3.$u.y(),{C:3.$u[0].1b,J:3.$u[0].1i});m d=f[0].1b,i=f[0].1i;m h=(H 3.7.q=="4")?3.7.q.1h(3.$u[0]):3.7.q;m e;1r(h.1j(0)){S"n":e={r:j.r+j.J+3.7.y,p:j.p+j.C/2-d/2};P;S"s":e={r:j.r-i-3.7.y,p:j.p+j.C/2-d/2};P;S"e":e={r:j.r+j.J/2-i/2,p:j.p-d-3.7.y};P;S"w":e={r:j.r+j.J/2-i/2,p:j.p+j.C+3.7.y};P}6(h.1R==2){6(h.1j(1)=="w"){e.p=j.p+j.C/2-15}D{e.p=j.p+j.C/2-d+15}}f.M(e).1s("5-"+h);6(3.7.v){f.1p().M({G:0,1n:"1o",V:"1e"}).1x({G:3.7.G})}D{f.M({V:"1e",G:3.7.G})}}},T:4(){6(3.7.v){3.z().1p().1z(4(){c(3).Z()})}D{3.z().Z()}},1m:4(){m f,d=3.$u,e=3.7;a(d);m f,e=3.7;6(H e.o=="11"){f=d.B(e.o=="o"?"12-o":e.o)}D{6(H e.o=="4"){f=e.o.1h(d[0])}}f=(""+f).1A(/(^\\s*|\\s*$)/,"");t f||e.18},z:4(){6(!3.$z){3.$z=c(\'<E Y="5"></E>\').N(\'<E Y="5-1E"></E><E Y="5-1a"/></E>\')}t 3.$z},1F:4(){6(!3.$u[0].1G){3.T();3.$u=1c;3.7=1c}},1I:4(){3.F=x},1J:4(){3.F=L},1L:4(){3.F=!3.F}};c.A.5=4(h){6(h===x){t 3.I("5")}D{6(H h=="11"){t 3.I("5")[h]()}}h=c.U({},c.A.5.1k,h);4 g(k){m l=c.I(k,"5");6(!l){l=1P b(k,c.A.5.1d(k,h));c.I(k,"5",l)}t l}4 j(){m k=g(3);k.O="1l";6(h.W==0){k.13()}D{1g(4(){6(k.O=="1l"){k.13()}},h.W)}}4 f(){m k=g(3);k.O="1f";6(h.X==0){k.T()}D{1g(4(){6(k.O=="1f"){k.T()}},h.X)}}6(!h.Q){3.1Y(4(){g(3)})}6(h.R!="20"){m d=h.Q?"Q":"21",i=h.R=="10"?"23":"24",e=h.R=="10"?"25":"26";3[d](i,j)[d](e,f)}t 3};c.A.5.1k={W:0,X:0,v:L,18:"",q:"n",N:L,Q:L,y:0,G:0.8,o:"o",R:"10"};c.A.5.1d=4(e,d){t c.19?c.U({},d,c(e).19()):d};c.A.5.28=4(){t c(3).y().r>(c(K).29()+c(16).J()/2)?"s":"n"};c.A.5.2b=4(){t c(3).y().p>(c(K).2c()+c(16).C()/2)?"e":"w"}})(2d);$(K).2e(4(){$(4(){$("a").5({v:x,q:"n"});$("E").5({v:x,q:"s"});$("2f").5({v:x,q:"s"});$("2g").5({v:x,q:"s"});$("2h").5({v:x,q:"s"});$("2i").5({v:x,q:"s"})})});',62,143,'|||this|function|tipsy|if|options|||||||||||||||var||title|left|gravity|top||return|element|fade||true|offset|tip|fn|attr|width|else|div|enabled|opacity|typeof|data|height|document|false|css|html|hoverState|break|live|trigger|case|hide|extend|visibility|delayIn|delayOut|class|remove|hover|string|original|show|tg||window|mps|fallback|metadata|inner|offsetWidth|null|elementOptions|visible|out|setTimeout|call|offsetHeight|charAt|defaults|in|getTitle|display|block|stop|Reserved|switch|addClass|body|appendTo|hidden|className|animate|text|fadeOut|replace|find|prototype|removeAttr|arrow|validate|parentNode|counter|enable|disable|privmsg|toggleEnabled|href|li|match|new|alt|length|Rights|All|com|toxigeek|giObanii|by|each|Copyright|manual|bind|Copyrights|mouseenter|focus|mouseleave|blur|i_icon_mini_new_message|autoNS|scrollTop|getElementById|autoWE|scrollLeft|jQuery|ready|span|img|button|input'.split('|'),0,{}))


Resultado


Descupe pela má qualidade da imagem demostrativa.

  • o que mudo??
    agora o código é automático ou seja agora tudo que tiver tooltip ira ficar personalizado





Desenvolvido por Max Kyle | © AjudaFM
Editado e Postado por © Max Kyle


Atenção:
Lembrando galera todos os tutoriais são testados sem ter nenhum outro código ativo, pois isso pode gerar incompatibilidade entre eles.



Última edição por Maxinho em Qui Dez 13, 2012 2:56 pm, editado 3 vez(es)

Ver perfil do usuário http://ajudafm.ativoforum.com

2 Re: [TUTORIAL] Tooltip elegante v² em Qua Dez 12, 2012 10:40 pm

Mensagens : 81
CashFM : 219
Reputação : 16
inscrição : 19/11/2012
Idade : 19
Localização : Logo ali

avatar

iHeload

ModeradorFM

ModeradorFM

Vol usar, melhor do que aquele retangulo que ja aparece


_________________________________________________________________________________________________________

Olá Convidado, olhe essas Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário http://sw-design.forumeiros.com

3 Re: [TUTORIAL] Tooltip elegante v² em Dom Dez 16, 2012 9:51 pm

Mensagens : 23
CashFM : 61
Reputação : 1
inscrição : 14/12/2012

avatar

SrAndy

Sou Nível 1


gostei muito desse tooltip mt msm vo por em meu forum

Ver perfil do usuário

4 Re: [TUTORIAL] Tooltip elegante v² em Qui Dez 27, 2012 6:05 pm

Mensagens : 2
CashFM : 6
Reputação : 0
inscrição : 27/12/2012

avatar

Belphegor

Sou Nível 1


Muito Bom Tutorial Vou Testa No Meu Forum

Ver perfil do usuário

5 Re: [TUTORIAL] Tooltip elegante v² em Qui Jan 02, 2014 5:35 pm

Mensagens : 2
CashFM : 6
Reputação : 0
inscrição : 02/01/2014

avatar

sivastar

Sou Nível 1


Thanks

Ver perfil do usuário

Conteúdo patrocinado



Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum