Question

当div悬停时，我尝试制作工具提示（隐藏/取消隐藏范围）。

我不知道问题出在哪里，因为using System; using System.Globalization; using System.Windows; using System.Windows.Data; namespace CurrentInspection.Converters { public class TimespanLessThanZeroConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (!(value is TimeSpan)) { return false; } return (TimeSpan)value < TimeSpan.Zero; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return DependencyProperty.UnsetValue; } } }始终可见，如果我添加span，则所有内容都将被隐藏。

非常感谢！

CSS：

display:none

HTML：

    .tooltip {
    display:relative;

}
.tooltip span:before {
    content:'';
    display:none;
    border-right: 8px solid #000000;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position:absolute;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    top: 30%;
    left: 83%;
}
.tooltip span:after {
    display:none;
    position:absolute;
    top:0%;
    left:89%;
    padding:5px 8px;
    background: #000000;
    color:#fff;
    z-index:9;
    font-size: 0.75em;
    height:auto;
    opacity: 0.8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space:nowrap;
    word-wrap:normal;
}
.tooltip span:hover:before,
.tooltip span:hover:after {
    display:block;
}

https://jsfiddle.net/dy6bjvbm/1/

Answer 1

如果您正在使用JavaScript / jQuery解决方案，则可以将mouseover和mouseout与hide（）和show（）元素一起使用。

＆＃13;

$(document).ready(function() {
  $("input.button").mouseover(function() {
    $('div span').hide();
  });
  $("input.button").mouseout(function() {
    $('div span').show();
  });
});

＆＃13;

.tooltip {
  display: relative;
}

.tooltip span:before {
  content: '';
  display: none;
  border-right: 8px solid #000000;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  position: absolute;
  z-index: 8;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
  top: 30%;
  left: 83%;
}

.tooltip span:after {
  display: none;
  position: absolute;
  top: 0%;
  left: 89%;
  padding: 5px 8px;
  background: #000000;
  color: #fff;
  z-index: 9;
  font-size: 0.75em;
  height: auto;
  opacity: 0.8;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  white-space: nowrap;
  word-wrap: normal;
}

.tooltip span:hover:before,
.tooltip span:hover:after {
  display: block;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<div class="tooltip">
  <span>tooltip text</span>
  <br>
  <input type="button" class="button active" value="HOVER ME">
</div>

＆＃13;

Answer 2

从以下内容开始：

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip span {
  display: none;
  position: absolute;
  top: 30px;
  border: 1px solid #ccc;
  padding: 5px;
  background: #eee;
}

.tooltip:hover span {
  display: block;
}

<div class="tooltip">
<span>tooltip text</span>
<input type="button" class="button active"  value = "HOVER ME" >
</div>

请看你的小提琴：https://jsfiddle.net/b60fcyu1/

Answer 3

如果你有恒定值，你可以这样做。（对于多行更有效）

.tooltip {
  position: relative;
  width: 300px;
  height: 30px;
}

.tooltip span {
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  line-height: 30px;
  bottom: 40px;
  border-radius: 5px;
  padding: 0 5px;
}

.tooltip span:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(0, 0, 0, 0);
  border-top-color: rgba(0, 0, 0, 0.6);
  border-width: 6px;
  margin-left: -6px;
}

.tooltip:hover span {
  opacity: 1;
  pointer-events: inherit;
}

<p style="height:100px;">
  <!-- for seperate -->
</p>

<div class="tooltip">
  <span>tooltip text tooltip text tooltip text tooltip text tooltip text tooltip text tooltip text tooltip text</span>
  <input type="button" class="button active" value="HOVER ME" style="width:100%;height:30px">
</div>

CSS工具提示（即使显示无工具提示也显示）

3 个答案: