Question

我有一个带有title属性的span，用于显示工具提示。它显示默认工具提示。但是我希望工具提示显示为带有黑色背景颜色和白色文本颜色的工具提示我怎么能这样做？

我的跨度HTML看起来像这样

<span class="bootstrap-switch-handle-on bootstrap-switch-success" 
      title="my span tooltip" style="width: 42px;">ON</span>

谢谢和问候

Answer 1

您需要使用CSS中的标题文本来创建新的工具提示元素。您不必添加新的el。只需使用像这样的伪选择器：

span:hover:after{
content: attr(data-title);
display:block;
//more width, height, background etc. here
}

然后使用data-title代替title来避免双重工具提示。

这是一个小提琴： https://jsfiddle.net/nyybsu1o/2/

Answer 2

参考：https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

.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;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

Answer 3

我已经在这里完成了这项工作，并与您分享。它采用了itamar所回答的相当技术，但添加了化妆品更加美味。您可以根据需要进一步改进。

这是：

＆＃13;

.tooltip {
  border-bottom: 1px dotted;
  position: relative;
}

.tooltip:after {
  position: absolute;
}

.tooltip:hover:after {
  top: 100%;
  left: 0;
  content: attr(data-tooltip);
  padding: .5em;
  min-width: 100px;
  max-width: 350px;
  background-color: #333;
  color: rgba(255, 255, 255, .75);
  border-radius: .25em;
}

＆＃13;

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus autem ipsum, culpa cum cumque perferendis, non, nisi a sint debitis eaque sit? Ratione vel aliquid eos, accusamus alias id perferendis.</p>
<p>Iusto ipsum laudantium sint, soluta necessitatibus alias, aperiam, iste nisi <span class="tooltip" data-tooltip="Illum possimus voluptas aperiam">consequuntur odit</span> culpa minima deserunt ipsa corrupti pariatur tempore enim expedita dignissimos maiores
  tenetur non dicta unde autem velit vitae.</p>
<p>Consectetur placeat veniam <span class="tooltip" data-tooltip="Cupiditate officia adipisci necessitatibus consectetur voluptates, tempore, aspernatur.">nobis excepturi</span> minus explicabo accusantium, nulla. Ducimus sequi quia consequuntur temporibus sapiente recusandae expedita ad voluptatum facere fugit, velit asperiores illum possimus voluptas aperiam nemo. Tenetur, ut.</p>
<p>Possimus impedit commodi amet fugiat, eligendi, nesciunt, labore natus ipsum vel nihil rem pariatur accusamus non at tenetur nobis est. Voluptas natus itaque, neque distinctio numquam animi velit, totam voluptatum.</p>
<p>Cumque temporibus blanditiis <span class="tooltip" data-tooltip="Voluptates provident non distinctio porro sit asperiores minus, quia molestias, animi sapiente suscipit maiores labore? Ipsa excepturi, possimus!">et ullam nam</span> asperiores reiciendis
  odit natus, voluptates. Cupiditate officia adipisci necessitatibus iste quos pariatur corrupti, sapiente in maxime commodi? Accusantium consectetur voluptates, tempore, aspernatur quibusdam similique.</p>

＆＃13;

我希望它有所帮助。干杯！

编辑：你也可以看一下Ballons.css，它专门用于绘制工具提示而不使用CSS。

样式化工具提示出现在跨度中

3 个答案: