重写CSS样式的jQuery UI的工具提示部件

我使用jQuery UI Tooltip widget 重写CSS样式的jQuery UI的工具提示部件

<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以自定义某些工具提示？

在此先感谢

来源

2011-01-24 elasticrash

你是什么意思，通过包装，是一个包容的元素或只是另一个类适用于工具提示？ – 2011-01-24 10:14:56

目前接受的答案非常过时，链接已经死亡。查看当前工作信息的最高投票答案 – 2015-07-08 21:11:23

对于那些希望应用自定义类新的工具提示部件（jQuery UI的1.9.1），extraClass似乎不工作了，但是有一个叫tooltipClass新的选择。

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

为了解决与jQuery的CSS潜在的冲突，您可能需要添加!important在你的CSS行的末尾。 感谢@sisharp指出了这一点:-)

来源

2012-10-27 21:00:37

我的荣幸：-D（特别是如果它可能会节省某人花费时间来解决它;-)） – 2013-01-15 20:28:18

其实它

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

见here

来源

2013-06-21 19:14:08 FredTheLover

试图建立在优秀的答案上面，我试图风格泡沫，让摆脱旧的...

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

<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和我忘了源。

来源

2016-09-28 21:43:50 user2060451

我尝试了上面的所有选项，但都没有为我工作。

我看着提示options docs其链接到这篇文章theming，我想这其中的工作看完后：

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

然后，只需用你的造型加2 CSS类：

my-custom-class-name { 
... 
} 
my-custom-class-name-content { 
... 
}

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

来源

2017-05-17 23:01:03 AmitF

重写CSS样式的jQuery UI的工具提示部件

回答

相关问题