重寫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的工具提示部件

回答

相關問題