html div文本边距_使用Marginotes轻松将边距悬停文本添加到任何网站

内联工具提示很棒，但有时它们与某些内容不太匹配。 大多数网站在页面正文的空白处留有空间，这非常适合添加没有工具提示的工具提示样式的内容 。

输入Marginotes ，这是一个免费的开源jQuery插件， 可以在网页的空白处添加自定义笔记 。 您可以根据链接或页面上的某些元素（例如图像）来切换这些注释。

该插件非常容易设置，并且附带了用于您的边距注释的默认样式表 。 它们显示在您内容的一侧 ，并且与您网页上的段落元素相邻。

悬停注释是使用desc属性 手动添加到HTML元素的。 我从没在HTML5中看到过它，所以不能说它是否完全符合要求。 但是，您的确需要JavaScript来拾取它。

您也可以在运行marginotes()函数时更改此属性 ，因此，如果您希望更加兼容，可以将其更改为data-desc 。

这是使此插件正常工作所需的jQuery的一行 ：

$("selector").marginotes()

您应将"selector"替换为要定位的任何元素。 因此，如果它们在您的页面正文内，则可以使用".body span" 。 您还可以定位锚链接或通过添加到这些元素的某些类来定位。

在marginotes()函数内，您可以添加两个可选参数来更改边注格式：

1. width –设置注释宽度（默认为100px）
2. field –设置HTML内容属性（默认为"desc" ）

另外，如果您不喜欢使用jQuery，可以尝试使用Vanilla Marginotes插件 。 它在香草JS上运行，因此您具有零依赖关系来获取所有相同功能。

如果您想观看实际演示，还可以查看此现场演示 。 这绝对是一个独特的插件，并且是向网站添加一些额外内容的好方法。

翻译自: https://www.hongkiat.com/blog/margin-hover-text-marginotes/