Question

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

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

Answer 1

你可以通过CSS本身来做到这一点。虽然有很多插件，但我们可以这样做。首先，你需要一个悬停元素，比如说这是一个链接。

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

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

<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;}

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

这只是纯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的其余部分只是为它设计“漂亮”，但主要功能在于3条注释行。

因此，当您将代码输出到html时，您需要生成一个＆＃39; a＆＃39;带有类工具提示的元素，其中包含文本（或图像）和跨度，跨度应该包含带有类标注的图像。

希望这有帮助。

无法使用a进行css工具提示

2 个答案: