根据位置修改Twitter Bootstrap的工具提示颜色 [英] Modifying Twitter Bootstrap's Tooltip Colors Based on Position

问题描述

我想输出各种颜色的工具提示（编辑：从Twitter Bootstrap），但它似乎我不太明白。只是更改默认颜色并不困难，它只是一个问题的更改.tooltip及其相关定义的颜色。

I am trying to output various colors for the tooltips (edit: from Twitter Bootstrap) but it seems I'm not quite getting it. Just changing the default color hasn't been hard, it's just a matter of changing the colors for .tooltip and its associated definitions.

但是假设我想更改正文中特定工具提示的颜色

However assuming I wanted to change the color for a specific tooltip within the body

<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的东西，我需要附加一些类的特定工具提示？还是我完全关闭？感谢：）

doesn't seem to work. I guess it's something about the DOM and I'd need to attach some sort of classes to the specific tooltips? Or am I completely off? Thanks :)

这是一个JSFiddle： http：// jsfiddle。 net / rZxrm /

Here's a JSFiddle: http://jsfiddle.net/rZxrm/

推荐答案

Twitter引导程序没有内置此功能，但您可以添加自己的函数像这样：

Twitter bootstrap does not have this feature built in, but you could add your own functions to do this, like so:

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

，然后您只需要在CSS中定义 tooltipPhoto 类，以具有不同的背景颜色。

and then you just have to define tooltipPhoto class in CSS to have a different background color.

编辑：
更新解决方案：

Updated solution:

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')});
});

这篇关于根据位置修改Twitter Bootstrap的工具提示颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！