Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Snygg tooltip i jQuery

Svara
2010-05-20, 10:36
  #1
PanpizzAn
Medlem
Hej!
Börjar bli gråhårig på det här problemet. Försöker ordna en snyggare "tooltip/hover" effekt när man för musen över meny länkarna på min sida. Det fungerar som det ska förutom en sak. Standard/default tooltip dyker också upp, alltså den där vanliga gula rutan. Hur blir man av med den egentligen? För övrigt fungerar det (nästan) som det ska.

Längst ner på den här sidan använder de samma sak jag är ute efter (för musen över någon av kategorierna i footern)

Länk till min sida: www.picmeeting.com

Jag använder wordpress och temat thesis theme. Här är koden jag lagt till för tillfället:

Kod:
// Shows a popup box under menu links
$(document).ready(function(){

    $(".menu a").append("<em></em>");
    
    $(".menu a").hover(function() {
        $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
        var hoverText = $(this).attr("title");
        $(this).find("em").text(hoverText);
    }, function() {
        $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
    });


}); 

Om någon lyckas lösa detta problem skulle jag tacksamt ta emot hur man ändrar så att istället för att hämta title attributet för länken istället hämtar en kort beskrivning. Hur man nu lägger till det

Tacksam om någon kan hjälpa mig
__________________
Senast redigerad av PanpizzAn 2010-05-20 kl. 10:38.
Citera
2010-05-20, 13:52
  #2
antezzz
Medlem
antezzzs avatar
Det du måste göra är att ta elementets title spara det till en varibel sedan tar du bort title attributet ifrån elementet visar din jquery tooltip och sätter dit title elementet med det gamla värdet på mouseout. Då kommer jquery visa innehållet i title men inte webbläsaren då title inte finns då du håller musen över länken.

Citat:
Okay, there is one major issue we need to sort it out - The native tooltip in Mozilla browsers. If you're using TITLE attribute in Anchor tag, on mouse over, a small yellow tooltip will appear, we want to avoid that. So, a simple solution, on mouse over, we will grab the value in the TITLE attribute, then, remove its value. While on mouse out, we'll put it back on. : ) simple and easy.
Citera
2010-05-20, 17:04
  #3
PanpizzAn
Medlem
Citat:
Ursprungligen postat av antezzz
Det du måste göra är att ta elementets title spara det till en varibel sedan tar du bort title attributet ifrån elementet visar din jquery tooltip och sätter dit title elementet med det gamla värdet på mouseout. Då kommer jquery visa innehållet i title men inte webbläsaren då title inte finns då du håller musen över länken.

Oj, jag kan verkligen inte något om jQuery. Har du lust/ork att visa med kod? Hittade detta skriptet på nätet.

Tack på förhand!

EDIT:
Jag provade att leka lite med Firebug och såg att om jag ändrar:
Kod:
<a href="http://www.picmeeting.com/kontakta-mig/" [b]title="Kontakta mig"[/b]>Kontakta mig<em style="display: none; top: -85px;">Kontakta mig</em></a> 
till
Kod:
<a href="http://www.picmeeting.com/kontakta-mig/" [b]alt="Kontakta mig"[/b]>Kontakta mig<em style="display: none; top: -85px;">Kontakta mig</em></a> 
Försvinner standard mouseover saken, men hur ändrar jag från title till alt i thesis temat? Någon som vet?
__________________
Senast redigerad av PanpizzAn 2010-05-20 kl. 17:17.
Citera
2010-05-20, 17:45
  #4
verath
Medlem
När du redan använder jQuery, varför inte använda ett plugin? http://craigsworks.com/projects/qtip/ har för mig fungerat riktigt bra.
Citera
2010-05-20, 18:21
  #5
PanpizzAn
Medlem
Citat:
Ursprungligen postat av verath
När du redan använder jQuery, varför inte använda ett plugin? http://craigsworks.com/projects/qtip/ har för mig fungerat riktigt bra.

Som sagt, är helt grön på jQuery. Försökte mig på att klistra in den här koden på sidan i en fil som jag döpt till custom.js, den laddas in som den skall (en sak som funkar iaf)
Kod:
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
   // By suppling no content attribute, the library uses each elements title attribute by default
   $('#content a[href][title]').qtip({
      content: {
         text: false // Use each elements title attribute
      },
      style: 'cream' // Give it some style
   });
   
   // NOTE: You can even omit all options and simply replace the regular title tooltips like so:
   // $('#content a[href]').qtip();
});
</script> 
Men sen slutar mitt kunskapsförråd helt. Hittar en bit kod som ska byta ut standard title mot qTip title eller ngt sådant. Men jag vet inte vad eller var jag ska klistra in den:
Kod:
$('a[title]').qtip({ style: { name: 'cream', tip: true } }) 

Hoppas någon har större kunskap inom detta än jag
Citera
2010-05-20, 22:35
  #6
PanpizzAn
Medlem
Har gjort några framsteg nu. Gick in i thesis temat koden och ändrade på två rader.

Jag har kvar den här koden i custom.js:
Kod:
// Shows a popup box under menu links
$(document).ready(function(){

    $(".menu a").append("<em></em>");
    
    $(".menu a").hover(function() {
        $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
        var hoverText = $(this).attr("alt");
        $(this).find("em").text(hoverText);
    }, function() {
        $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
    });


}); 

Kod:
echo "<li class=\"rss\"><a href=\"" . thesis_feed_url() . "\" [b]title[/b]=\"$feed_title\"$feed_nofollow>" . trim(wptexturize(thesis_feed_link_text())) . "</a></li>\n"; #wp 

Ändrade jag till:
Kod:
echo "<li class=\"rss\"><a href=\"" . thesis_feed_url() . "\" [b]alt[/b]=\"$feed_title\"$feed_nofollow>" . trim(wptexturize(thesis_feed_link_text())) . "</a></li>\n"; #wp 

Och:
Kod:
echo "<li$tab><a href=\"" . get_page_link($nav_item['id']) . "\" [b]title[/b]=\"$title\">$link_text</a></li>\n"; #wp 
till
Kod:
echo "<li$tab><a href=\"" . get_page_link($nav_item['id']) . "\" [b]alt[/b]=\"$title\">$link_text</a></li>\n"; #wp 

Markerade skillnaderna med fet text.

Tyvärr gör detta bara att title texten dyker upp i "hovern" inte en beskrivande text som jag egentligen ville ha, Någon som kan PHP bra? Borde ju gå att ändra på $title till $description eller något annat. Kan som sagt inte PHP
Citera
Svara

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback