Ajoutez facilement du texte de survol à n'importe quel site Web avec Marginotes
Info-bulles en ligne sont fantastiques mais parfois, ils ne correspondent tout simplement pas bien à certains contenus. La plupart des sites Web laissent des espaces dans les marges le long du corps de la page, ce qui est parfait pour ajouter contenu de type info-bulle sans les info-bulles.
Entrer Marginotes, un plugin gratuit jQuery open source qui ajoute des notes personnalisées aux marges de votre page web. Vous pouvez basculer ces notes en fonction de liens ou de certains éléments de la page, tels que des images..
Ce plugin est étonnamment facile à installer et vient avec un feuille de style par défaut pour vos notes de marge. Ceux-ci apparaissent sur le côté de votre contenu et ils alignent juste à côté de l'élément de paragraphe sur votre page Web.
Les notes de survol sont ajouté manuellement à vos éléments HTML, utilisant un desc attribut. Je n'ai jamais vu cela en HTML5, donc je ne peux pas dire si c'est totalement conforme. Mais, il est pris en charge par JavaScript qui est tout ce dont vous avez vraiment besoin.
Vous pouvez également changer cet attribut quand vous courez le marginotes () fonction, de sorte que vous pouvez le changer en quelque chose comme data-desc si vous cherchez à être plus conforme.
Ici se trouve le une ligne de jQuery nécessaire pour que ce plugin fonctionne:
$ ("sélecteur"). marginotes () Vous devriez remplacer "sélecteur" avec tous les éléments que vous ciblez. Donc, s'ils sont dans votre corps de page, vous pouvez utiliser ".body span". Tu pourrais aussi liens d'ancrage cible ou par certaines classes ajouté à ces éléments.
À l'intérieur de marginotes () fonction, vous pouvez ajouter deux paramètres optionnels pour changer le format de la note de marge:
largeur- définit la largeur de la note (100px par défaut)champ- définit l'attribut de contenu HTML (par défaut,"desc")
De plus, si vous n'aimez pas utiliser jQuery, vous pouvez essayer le vanille Marginotes plugin. Il fonctionne sur la vanille JS, de sorte que vous avez zéro dépendance pour obtenir toutes les mêmes caractéristiques.
Vous pouvez également vérifier ceci démo en direct si vous voulez le voir en action. C’est vraiment un plugin unique et un excellent moyen de ajouter du contenu supplémentaire sur votre site.
