Question

我正在使用jQuery UI Tooltip widget

<li>
    <div class="i1">
        <a href="#inf-1"title="ΕΝΤΟΠΙΣΜΟΣ">
            <span class="ui-icon ui-icon-search"></span>
        </a>
    </div>
</li>
<li><a href="#inf-2"title="ΠΛΗΡΟΦΟΡΙΕΣ"><span class="ui-icon ui-icon-info"></span></a></li>
<li><a href="#inf-3"title="ΕΠΙΠΕΔΑ"><span class="ui-icon ui-icon-copy"></span></a></li>

我根据他们的例子编写了以下CSS，它就像一个魅力：

.tooltip {
    display:none;
    background: black;
    font-size:12px;
    height:10px;
    width:80px;
    padding:10px;
    color:#fff; 
    z-index: 99;
    bottom: 10px;
    border: 2px solid white;
/* for IE */
  filter:alpha(opacity=80);
  /* CSS3 standard */
  opacity:0.8;
}

但我有3-4个工具提示，我想看起来不同（如上面的示例html）所以我把它们包装在一个类中并做到了这一点：

.i1 .tooltip  {
    display:none;
    background: red;
    font-size:12px;
    height:40px;
    width:80px;
    padding:20px;
    color:#fff; 
    z-index: 99;
    bottom: 10px;
    left: 50px important!;
    border: 2px solid white;
/* for IE */
  filter:alpha(opacity=80);
  /* CSS3 standard */
  opacity:0.8;
}

绝对没有。如何覆盖通用 .tooltip 以不同方式自定义某些工具提示？

提前致谢

Answer 1

对于那些希望将自定义类应用于新工具提示小部件（jQuery UI 1.9.1）的人来说，extraClass似乎不再起作用了，但是有一个名为tooltipClass的新选项。

$('.selector').tooltip({
        tooltipClass: "your_class-Name",
});

为了解决与jQuery的css的潜在冲突，您可能需要将!important添加到css中行的末尾。 感谢@sisharp指出： - ）

Answer 2

试图在上面的优秀答案的基础上，我试图塑造泡沫并摆脱旧泡沫......

如果你是像我这样的新手（在其他人，简单的任务需要几个小时），很高兴在同一个地方同时得到答案:) 以下是来自几个来源的解决方案，包括这个问题：

<a href="#"  title="We are trying hard" class="mytooltip"><span title="">BETA</scan></a>

该范围会删除浏览器气泡。

新泡泡的CSS例如：

.mytooltip:hover:after{
  background: #333;
  background: rgba(0,0,0,.9);
  border-radius: 5px;
  bottom: 26px;
  color: rgb(255, 77, 85);
  content: attr(title);
  right: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;}
.mytooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    right: 50%;
    position: absolute;
    z-index: 99;
}

.mytooltip {
  radius: 4px !important;
  background-color: black;
   color: rgb(255, 77, 85) !important;
  padding: 5px 20px;
  border-radius: 20px;
  margin: 50px;
  text-align: center;
  font: bold 14px ;
  font-stretch: condensed;
  text-decoration: none;
  box-shadow: 0 0 10px black;
}

上面提到的脚本，插在页脚：

<script>
$('.selector').tooltip({
        tooltipClass: "mytooltip",
});
</script>

感谢您提出这个问题this，我忘了其他来源。

Answer 3

我尝试了上面的所有选项，但没有一个适合我。

我查看了与options docs这篇文章相关的工具提示theming，在阅读之后我尝试了这个有用的工具：

npm prep

然后只需添加2个带有样式的CSS类：

$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}})

请注意，您可能必须在自定义类中使用！important。

Answer 4

实际上是

$( ".selector" ).tooltip( "option", "tooltipClass", "custom-tooltip-styling" );

请参阅here

Answer 5

其他解决方案：

$.widget( "ui.tooltip", $.ui.tooltip, {

    options:{

          tooltipClass: "your_class-Name",

    }

});

覆盖jQuery UI Tooltip小部件的CSS样式

5 个答案: