如何更改工具提示背景颜色

时间:2015-12-30 14:43:41

标签: html

我想创建类似工具提示,如此小提琴

所示

http://jsfiddle.net/Qv6L2/294/

(请将鼠标悬停在输入字段上以查看工具提示)

我正在关注上述小提琴,并将我的代码创建为

<div class="kp-color-button">
   <a id="bullishengulfing" rel="tooltip"  data-toggle="tooltip" data-placement="bottom" title="This is bullishengulfing" class="candlespattern green-button">Bullish Engulfing</a>
   <a id="dojiyestersay" rel="tooltip" data-placement="bottom"  data-toggle="tooltip"  title="This is dojiyestersay" class="candlespattern orange-button">Doji Yesterday</a>
   <a id="hammer" rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="This is hammer"  class="candlespattern light-blue-button">Hammer Pattern</a>
   <a id="bearishengulfing" data-placement="bottom"  data-toggle="tooltip" rel="tooltip" title="This is bearishengulfing" class="candlespattern maroon-button">Bearish Engulfing</a>
</div>

这是我的小提琴

http://jsfiddle.net/7jf3E/31/

你能告诉我如何创建类似的工具提示吗?

2 个答案:

答案 0 :(得分:1)

第一个小提琴使用一组JS和CSS代码来创建工具提示。

在您在第二个小提琴中使用的代码中,工具提示基于“标题”HTML属性,并且您添加的所有数据*内容都没有效果。

编辑:更具体地说,浏览器生成一个基于“标题”的工具提示,就像应用程序中的工具提示一样。它不是HTML实体,因此无法进行样式设置。

您似乎已经从其他代码/页面复制/粘贴了这些数据属性,而不知道它们是什么。也许是使用Bootstrap的东西: http://getbootstrap.com/javascript/#tooltips

无论如何,要回答您的问题,您无法更改基于“标题”的工具提示的颜色。

但是如果你要开办一个新网站,请不要犹豫,检查一下Bootstrap。

最佳,

答案 1 :(得分:0)

首先为工具提示添加另一个div

<div id = "tooltip"></div>

然后用CSS隐藏它

#tooltip {
    display: none;
}

然后使用jQuery:

$(document).ready(function() {
    $("#bullishengulfing").hover(function() {
        $("#tooltip").show("slow");
        $("#tooltip).text("the text for that category");
    )}; // repeat this for every div
)};

希望这有帮助!