Изменение цвета подсказки для бутстрапа Twitter на основе позиции

Я пытаюсь вывести различные цвета для всплывающих подсказок (редактировать: из Twitter Bootstrap), но кажется, что я не совсем понял. Просто изменение цвета по умолчанию не было трудным, это просто вопрос изменения цветов для .tooltip и связанных с ним определений.

Однако, предполагая, что я хотел изменить цвет для конкретной подсказки в теле

<div id="users" class="row">
    <div id="photo_stack" class="span6 photo_stack">
        <img id="photo1" src="" width="400px" height="300px" alt="" rel="tooltip" data-placement="right" title="Other Color" />

Простой подход, например

#users .tooltip { background-color: #somecolor; }

похоже, не работает. Я предполагаю, что это что-то о DOM, и мне нужно было прикрепить какие-то классы к конкретным подсказкам? Или я полностью отключен? Спасибо:)

Здесь JSFiddle: http://jsfiddle.net/rZxrm/

Ответ 1

Twitter bootstrap не имеет встроенной функции, но вы можете добавить свои собственные функции для этого:

$('#photo1').hover(function() {$('.tooltip').addClass('tooltipPhoto')}, function () {$('.tooltip').removeClass('tooltipPhoto')});

а затем вам просто нужно определить класс tooltipPhoto в CSS, чтобы иметь другой цвет фона.

EDIT: Обновленное решение:

function changeTooltipColorTo(color) {
    $('.tooltip-inner').css('background-color', color)
    $('.tooltip.top .tooltip-arrow').css('border-top-color', color);
    $('.tooltip.right .tooltip-arrow').css('border-right-color', color);
    $('.tooltip.left .tooltip-arrow').css('border-left-color', color);
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color);
}

$(document).ready(function () {
    $("[rel=tooltip]").tooltip();
    $('#photo1').hover(function() {changeTooltipColorTo('#f00')});
    $('#photo2').hover(function() {changeTooltipColorTo('#0f0')});
    $('#photo3').hover(function() {changeTooltipColorTo('#00f')});
});

Ответ 2

Если вы используете всплывающую подсказку, вы можете использовать встроенные цвета тем, которые представляют собой информацию, успех, опасность и предупреждение. Однако Bootstrap не поддерживает темы для всплывающих подсказок (в V3 на момент написания), но мы можем добавить несколько строк CSS для этого.

В идеале мы хотим установить классы tooltip-info, tooltip-danger, tooltip-success и т.д., которые вы можете применить к элементу, который вы вызываете tooltip(). Я дам код ниже, который делает именно это и проверяется с помощью Bootstrap 3.0.

Результат

Как это работает

Ниже код в основном повторяет стили для компонента предупреждения, так как он очень похож на всплывающую подсказку. Обратите внимание, что у этого есть несколько преимуществ, в том числе тот факт, что изменяются не только цвет фона, но и цвет текста, а также цвет границы. Плюс это дает подсказку слегка прозрачный глянцевый вид. Стрелка в подсказке зависит от цвета границы, поэтому она изменяется отдельно, наследуя цвет рамки оповещения.

Также обратите внимание, что это не глобальные изменения. Если вы не применяете такие классы, как tooltip-info, вы получаете всплывающую подсказку по умолчанию.

Использование

<span class="tooltip-info"  title="Hello, I'm dangerous">
    Hover here to see tooltip!
</span>

Обратите внимание, что всплывающие подсказки Bootstrap по умолчанию не активируются, поэтому вам нужна активация (см. fooobar.com/questions/29389/...)

$(document.body).tooltip({ selector: "[title]" });

Fiddle

Играйте с этим кодом здесь: http://jsbin.com/usIyoGUD/3/edit?html,css,output

LESS CSS Source

//Import these from your own Bootstrap folder
@import  "js/ext/bootstrap/less/mixins.less";
@import  "js/ext/bootstrap/less/variables.less";

.tooltip-border-styles(@borderColor) {
    & + .tooltip {
        &.top .tooltip-arrow,
        &.top-left .tooltip-arrow,
        &.top-right .tooltip-arrow {
            border-top-color: @borderColor;
        }
        &.bottom .tooltip-arrow,
        &.bottom-left .tooltip-arrow,
        &.bottom-right .tooltip-arrow {
            border-bottom-color: @borderColor;
        }
        &.right .tooltip-arrow {
            border-right-color: @borderColor;
        }
        &.left .tooltip-arrow {
            border-left-color: @borderColor;
        }
    }
}

.tooltip-info {
  & + .tooltip .tooltip-inner {
    .alert-info;
  }
  .tooltip-border-styles(@alert-info-border);
}
.tooltip-danger {
  & + .tooltip .tooltip-inner {
    .alert-danger;
  }
  .tooltip-border-styles(@alert-danger-border);
}
.tooltip-warning {
  & + .tooltip .tooltip-inner {
    .alert-warning;
  }
  .tooltip-border-styles(@alert-warning-border);
}
.tooltip-success {
  & + .tooltip .tooltip-inner {
    .alert-success;
  }
  .tooltip-border-styles(@alert-success-border);
}

Скомпилированный CSS

Если вы не используете LESS или не хотите иметь дело с ним, вы можете использовать ниже скомпилированный CSS напрямую:

.tooltip-info + .tooltip .tooltip-inner {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
  background-repeat: repeat-x;
  border-color: #9acfea;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}
.tooltip-info + .tooltip.top .tooltip-arrow,
.tooltip-info + .tooltip.top-left .tooltip-arrow,
.tooltip-info + .tooltip.top-right .tooltip-arrow {
  border-top-color: #bce8f1;
}
.tooltip-info + .tooltip.bottom .tooltip-arrow,
.tooltip-info + .tooltip.bottom-left .tooltip-arrow,
.tooltip-info + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #bce8f1;
}
.tooltip-info + .tooltip.right .tooltip-arrow {
  border-right-color: #bce8f1;
}
.tooltip-info + .tooltip.left .tooltip-arrow {
  border-left-color: #bce8f1;
}
.tooltip-danger + .tooltip .tooltip-inner {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
  background-repeat: repeat-x;
  border-color: #dca7a7;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
}
.tooltip-danger + .tooltip.top .tooltip-arrow,
.tooltip-danger + .tooltip.top-left .tooltip-arrow,
.tooltip-danger + .tooltip.top-right .tooltip-arrow {
  border-top-color: #ebccd1;
}
.tooltip-danger + .tooltip.bottom .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-left .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #ebccd1;
}
.tooltip-danger + .tooltip.right .tooltip-arrow {
  border-right-color: #ebccd1;
}
.tooltip-danger + .tooltip.left .tooltip-arrow {
  border-left-color: #ebccd1;
}
.tooltip-warning + .tooltip .tooltip-inner {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
  background-repeat: repeat-x;
  border-color: #f5e79e;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.tooltip-warning + .tooltip.top .tooltip-arrow,
.tooltip-warning + .tooltip.top-left .tooltip-arrow,
.tooltip-warning + .tooltip.top-right .tooltip-arrow {
  border-top-color: #faebcc;
}
.tooltip-warning + .tooltip.bottom .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-left .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #faebcc;
}
.tooltip-warning + .tooltip.right .tooltip-arrow {
  border-right-color: #faebcc;
}
.tooltip-warning + .tooltip.left .tooltip-arrow {
  border-left-color: #faebcc;
}
.tooltip-success + .tooltip .tooltip-inner {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  background-repeat: repeat-x;
  border-color: #b2dba1;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
}
.tooltip-success + .tooltip.top .tooltip-arrow,
.tooltip-success + .tooltip.top-left .tooltip-arrow,
.tooltip-success + .tooltip.top-right .tooltip-arrow {
  border-top-color: #d6e9c6;
}
.tooltip-success + .tooltip.bottom .tooltip-arrow,
.tooltip-success + .tooltip.bottom-left .tooltip-arrow,
.tooltip-success + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #d6e9c6;
}
.tooltip-success + .tooltip.right .tooltip-arrow {
  border-right-color: #d6e9c6;
}
.tooltip-success + .tooltip.left .tooltip-arrow {
  border-left-color: #d6e9c6;
}

Ответ 3

Я нашел другое решение для вашей проблемы (я пытался сделать то же самое). Просто измените цвет в своей основной таблице стилей CSS (он переопределит загрузочный файл, если ваша таблица стилей указана после начальной загрузки в начале вашего документа).

В частности, что вы добавили в свою основную таблицу стилей (в качестве примера):

.tooltip-inner {
  background-color: #D13127;
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #D13127;
}

Ответ 4

См. Динамически добавить класс в контейнер "popover" Bootstrap

Ее исправление разрешает селектор класса данных, изменяя bootstrap.js с помощью одной строки

Ответ 5

Вот как я делаю это в sass

  .tooltip-inner
    color: #fff
    background-color: #111
    border: 1px solid #fff

  .tooltip.in
    opacity: .9

И зависимая от позиции часть

  .tooltip.bottom .tooltip-arrow
    border-bottom-color: #fff