不能只用一个 css 工具提示

Question

我在制作 css 工具提示时遇到问题，我看了 http://www.menucool.com/tooltip/css-tooltip 上的教程，但我不明白 css 代码。

我在 Javascript class 上所做的是创建一个新图像并将其命名为 getSclass() 以应用 css。在教程提供的代码中，我不明白我应该把 html 部分放在哪里，以及 a.tooltip 怎么样（这是否意味着我有给我的图像一个特殊的 ID？）如果我应该只使用 Javascript class（当我调用 img）和 css 文件时，我必须做什么。我也打过电话settooltiptext()，但我觉得这里不是这样的！

Answer 1

您可以通过 CSS 本身来完成此操作。虽然有很多插件，但让我们做这样的事情。首先，您需要一个悬停元素，在本例中为 link.

<a href="#">Hover Me!</a>

接下来应该是工具提示。我们现在可以有一个 <span> 并将其放在 link.

中

<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

现在是真正的 CSS 部分。

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}

片段

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}

<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

这只是一个纯粹的 CSS 解决方案。你可以看到工作 fiddle here.

但是，有很多插件将此概念作为基础并用于悬停卡和工具提示。一些很好的例子包括：

Answer 2

根据你的问题，很难猜测你在做什么以及你如何输出 html。但也许帮助您理解 css 代码将帮助您解决问题。

css 工具提示依赖于以下 html 结构

<!--the a element should wrap both the standard text or image-->
<a href="#" class="tooltip"> 
    <!--tooltip text or image here -->
    Tooltip
    <!--the tooltip part here-->
    <span>
        <!--important is the class callout on the image-->
        <img class="callout" src="cssttp/callout.gif" />
        <!-- and this is just text that fills the tooltip-->
        <strong>Most Light-weight Tooltip</strong><br />
         This is the easy-to-use Tooltip driven purely by CSS.
    </span>
</a>

关键 css 规则如下：

a.tooltip span {
    z-index:10;
    display:none; /*hide the span normally*/
    padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}

a.tooltip:hover span{
    display:inline; /*when we hover the tooltip, the span inside gets displayed inline*/
    position:absolute; /*and we make sure that the tooltip doesn't move other content*/
    color:#111;
    border:1px solid #DCA; background:#fffAF0;
}

css 的其余部分只是对其设置样式 'pretty'，但主要功能在于 3 行注释。

因此，当您将代码输出到 html 时，您需要生成一个带有 class 工具提示的 'a' 元素，其中包含文本（或图像）和span，并且 span 中应该有带有 class 标注的图像。

希望对您有所帮助。

不能只用一个 css 工具提示

Can't make a css tooltip only with a

javascript

html

css

tooltip