Legg til Margin Hover Text til noen nettsteder enkelt med Marginotes
Inline verktøytips er fantastisk, men noen ganger passer de ikke bra med bestemt innhold. De fleste nettsteder gir plass i marginene langs sidekroppen, og dette er perfekt for å legge til Tooltip-stil innhold uten verktøytips.
Tast inn Marginotes, en gratis åpen kildekode jQuery plugin som legger til tilpassede notater til margenene av nettsiden din. Du kan bytte disse notatene basert på koblinger eller enkelte elementer på siden, for eksempel bilder.
Dette pluginet er overraskende enkelt å sette opp og det følger med a standard stilark for margin notater. Disse vises av til siden av innholdet ditt og de justeres rett ved siden av avsnittet elementet på nettsiden din.
Hover notatene er lagt til manuelt til HTML-elementene dine, bruker en desc Egenskap. Jeg har aldri sett dette i HTML5, så jeg kan ikke si om det er fullt kompatibelt. Men det blir hentet av JavaScript, som er alt du virkelig trenger.
Du kan også endre denne attributtet når du kjører marginotes () funksjon, slik at du kan bytte den til noe som helst data-desc hvis du ønsker å være mer kompatibel.
Her er en linje av jQuery trengs for å få dette pluginet til å fungere:
$ ( "Velgeren"). Marginotes ()
Du bør erstatte "Velgeren" med hvilke elementer du målretter mot. Så, hvis de er inne i sidekroppen din, kan du bruke ".body span". Du kan også mål ankerforbindelser eller av bestemte klasser lagt til disse elementene.
Inne i marginotes () funksjon, kan du legge til to valgfrie parametere for å endre marginalnotatformatet:
bredde- setter notatbredden (standard til 100px)felt- Angir HTML-innholdsattributtet (standard til"Desc")
Også, hvis du ikke liker å bruke jQuery, kan du prøve Vanilje Marginotes-plugin. Den kjører på vanilje JS, så du har null avhengigheter for å få alle de samme funksjonene.
Du kan også sjekke ut dette live demo hvis du vil se det i aksjon. Dette er definitivt et unikt plugin, og det er en fin måte å legg til litt ekstra innhold til nettstedet ditt.
