Переопределение стилей CSS виджета всплывающей подсказки пользовательского интерфейса jQuery
На встроенном проекте с пределом 64 КБ я однажды сделал, я не мог даже связать стандартные библиотеки для C. Таким образом, это зависит от того, что необходимо сделать
4 ответа
Для тех, кто хочет применить пользовательский класс к новому виджету всплывающей подсказки (jQuery UI 1.9.1), extraClass, похоже, больше не работает, но есть новая опция, называемая tooltipClass.
$('.selector').tooltip({
tooltipClass: "your_class-Name",
});
Чтобы разрешить потенциальные конфликты с помощью jQuery css, вам может потребоваться добавить !important в конец строк вашего css. Спасибо @sisharp за указание на это: -)
Пытаясь развить превосходный ответ, приведенный выше, я пытался придать пузырьку стиль и избавиться от старого ...
Если вы новичок, как я (в других, простая задача занимает часы ), приятно иметь ответ в одно и то же время в одном и том же месте :) Вот решение из нескольких источников, включая этот вопрос:
<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>
Спасибо за этот вопрос, это и я забыл другой источник.
На самом деле его
$( ".selector" ).tooltip( "option", "tooltipClass", "custom-tooltip-styling" );
См. здесь
Другое решение:
$.widget( "ui.tooltip", $.ui.tooltip, {
options:{
tooltipClass: "your_class-Name",
}
});