Question

我找到了一个很酷的css“工具提示”脚本，它对我的网站非常有效，但是当有人在href上盘旋时，它已经被用来了。

我的CSS技能非常有限，特别是在定位方面。所以，这可能会帮助我，这取决于我如何解释我需要做什么。

下面是和标记，当你悬停鼠标时，它现在有效。

<style type="text/css">
    .tooltip {
        border-bottom: 1px dotted #000000; color: #000000; outline: none;
        cursor: help; text-decoration: none;
        position: relative;
    }
    .tooltip span {
        margin-left: -999em;
        position: absolute;
    }
    .tooltip:hover span {
        border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        font-family: Calibri, Tahoma, Geneva, sans-serif;
        position: absolute; left: 1em; top: 2em; z-index: 99;
        margin-left: 0; width: 250px;
    }
    .tooltip:hover img {
        border: 0; margin: -10px 0 0 -55px;
        float: left; position: absolute;
    }
    .tooltip:hover em {
        font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
        display: block; padding: 0.2em 0 0.6em 0;
    }
    .custom { padding: 0.5em 0.8em 0.8em 2em; }
    * html a:hover { background: transparent; }
    .warning { background: #FFFFAA; border: 1px solid #FFAD33; }
</style>


<table style="width:100%;">
  <tr>
    <td>
      <a class="tooltip" href="#">Warning<span class="custom warning">
      <img src="/images/tooltip/warning.png" alt="Warning" height="48" width="48" />
      <em>Warning</em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!</span>
     </a>
    </td>
  </tr>
</table>

你会看到我也有一张照片。这是一个简单的黄色惊叹号。但它很好地安排在工具提示框的左侧。

我现在正在尝试使用相同的工具提示（圆边和所有），而不使用悬停。换句话说，我非常喜欢它，我想将它放在我的网页上，也许是在标题中，在右侧，并将它作为一个静态的东西。

在演奏了这些风格之后，我基本上得出了我需要帮助定位的结论。

你会看到.tooltip span {margin-left：-999em;位置：绝对; } 这对我来说是一个主要问题。我想如果我拿出边距左边它只会显示工具提示，而不需要：悬停显示。唉，这让我望而却步！

如何直接“删除”，只需显示工具提示，无需悬停？

Answer 1

修改 的我觉得自己很好，而且我很无聊。所以这里又是固定的右上角定位。我也更改了类名（工具提示似乎可能会用于其他东西）

Fixed Positioning

好的，所以我已经删除了你不需要的所有东西（一目了然）

See Here

<强> HTML

<div class="tooltip" href="#"><span class="custom warning"> <img src="/images/tooltip/warning.png" alt="Warning" height="48" width="48" /> <em>Warning</em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!</span> </div>

<强> CSS

.tooltip { cursor: help; position: relative; } .tooltip span { border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; } .tooltip img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; } .tooltip em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; } .custom { padding: 0.5em 0.8em 0.8em 2em; } .warning { background: #FFFFAA; border: 1px solid #FFAD33; }

Answer 2

只需删除整个“.tooltip span”规则。

它的作用是将内容放在页面之外（-999em远离页面内的faaaaaar），当你将鼠标悬停在页面上时，它会将其重新放入。所以，只需完全删除CSS规则，它应该显示正常。

无论如何我在jsfiddle中尝试过它。

编辑：从“.tooltip：hover span”规则中删除“：hover”。

CSS表圆角和图像修改

2 个答案: