Переопределение стилей CSS виджета подсказки пользовательского интерфейса jQuery - PullRequest
Новая
       7

Переопределение стилей CSS виджета подсказки пользовательского интерфейса jQuery

25 голосов
/ 24 января 2011

Я использую пользовательский интерфейс jQuery Виджет всплывающей подсказки 

<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 , чтобы по-разному настраивать определенные подсказки?

Заранее спасибо

Ответы [ 5 ]

65 голосов
/ 28 октября 2012

Для тех, кто хочет применить пользовательский класс к новому виджету всплывающей подсказки (jQuery UI 1.9.1), extraClass, похоже, больше не работает, но есть новая опция под названием tooltipClass. 

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

Чтобы разрешить потенциальные конфликты с помощью jQuery css, вам может понадобиться добавить !important в конец строк в вашем css. Спасибо @sisharp за указание на это: -)

1 голос
/ 18 мая 2017

Я перепробовал все вышеперечисленные варианты, но у меня не получилось ни одного.

Я посмотрел на всплывающую подсказку options docs , которая ссылалась на эту статью о темах , после прочтения я попробовал это, которое сработало: 

$('#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 {
...
}

Обратите внимание, что вам может понадобиться использовать! Важное в ваших пользовательских классах.

1 голос
/ 29 сентября 2016

Пытаясь развить превосходный ответ, приведенный выше, я пытался придать пузырьку стиль и избавиться от старого ...

Если вы новичок, как я (в других, простая задача занимает несколько часов), было бы хорошо, чтобы ответ был одновременно в одном месте :) Вот решение из нескольких источников, включая этот вопрос: 

<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>

Спасибо за этот вопрос, это , и я забыл другой источник.

0 голосов
/ 14 марта 2019

Другое решение: 

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

    options:{

          tooltipClass: "your_class-Name",

    }

});
0 голосов
/ 21 июня 2013

На самом деле это 

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

См. здесь

...