Question

我正在关注this example以获取悬停的工具提示。当我已经将一个类分配给元素标记<i>时，我无法这样做。我发现通过将它们用空格分隔，我可以为同一个元素分配2个类。但是，如果我有课程工具提示，图标就会消失。

＆＃13;

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<td>
  <i class="material-icons tooltip" ng-click="view(application._id)" data-toggle="tooltip" title="Hooray!">
    receipt
  </i>
  <span class="tooltiptext">Tooltip text</span> &nbsp;&nbsp;
  <i class="material-icons" ng-click='edit(application._id)' style="color:red">
    edit
  </i> &nbsp;&nbsp;
  <i class="material-icons" ng-click="remove(application._id)" style="color:red">
    delete
  </i>
</td>

＆＃13;

如何在这些图标<i class="material-icons">上悬停工具提示？在我的CSS中，工具提示为visibility: hidden;。是因为这个吗？如何纠正？

编辑 - 我添加了样式表，如果我包含，则图标不可见。

我创建了一个jsfiddle - https://jsfiddle.net/TTrain/r5hhkwLb/

Answer 1

嘿，伙计！我会尽可能轻松地回答你

您不需要新的工具提示效果类

HTML：

I'm using Font Awesome Framework, like as Your

<body>

    ... HTML CONTENT ...

    <i class="fa fa-facebook">
        <span>My beautiful tootip</span>
    </i>

    ... OTHER HTML CONTENT ...

</body>

CSS：

i {
    position: relative; /** ADD THIS TO i TAG. This do magic! It's necessary **/
}

i span {
    visibility: hidden;
    opacity:  0;
    position: absolute; /** It's necessary to do magic **/
    bottom: -32px; /** Show Tooltip 32px bottom "i" tag. Depends on "i" tag height =) **/
    left: 0;
    text-align: center; /** If You want tooltip text centered **/
    padding: 5px; /** Tooltip padding **/
    width: 150px; /** Tooltip width. You can set 100% to cover all "i" tag **/
    height: auto; /** Auto is good choice **/
    background: #000; /** Tooltip background **/
    color: #fff; /** Tooltip text color **/
}

i:hover span {
    visibility: visible;
    opacity: 1;
}

其他 - 完美！但我想要一个漂亮的动画（过渡）。我怎么能这样做？

添加上面的CSS代码，这行

i span {

    /** ... OTHER RULES SEE ABOVE ... **/

    transition-duration: 0.2s; /** Animation duration **/
    transition-property: opacity; /** Apply animation only on opacity rule **/

    /** Compatibility with other Browsers */
    -moz-transition-duration: 0.2s;
    -moz-transition-property: opacity;
    -o-transition-duration: 0.2s;
    -o-transition-property: opacity;
    -ms-transition-duration: 0.2s;
    -ms-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-property: opacity;
}

Answer 2

您的代码行中有一个结束</i>。如果将它放在最后，它将无法工作，因为工具提示的文本将是不可读的。你必须做这样的事情：

    <span class="tooltip"><i class="material-icons" ng-click="view(application._id)" >receipt</i><span class="tooltiptext">Tooltip text</span></span>&nbsp;&nbsp;

保

PS：它正在我的电脑上工作。我为它创造了一个小提琴。 https://codepen.io/anon/pen/mBQboL。我无法包含图标字体，但图标没有消失。

Answer 3

将范围放在 i 标记

中

您有此问题

 <i class="material-icons tooltip" ng-click="view(application._id)" >receipt</i><span class="tooltiptext">Tooltip text</span>&nbsp;&nbsp;

<强>解决方案

  <i class="material-icons tooltip" ng-click="view(application._id)" >receipt<span class="tooltiptext">Tooltip text</span></i>&nbsp;&nbsp;

Answer 4

也许你可以使用Title =＆＃34; Tooltip Text＆＃34;在i标签内或任何像img这样的元素。它更容易^ _ ^

悬停在元素

4 个答案:

其他 - 完美！但我想要一个漂亮的动画（过渡）。我怎么能这样做？