我想创建类似的工具提示,如这个fiddle 中所示
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/
你能告诉我如何创建类似的工具提示吗??
第一个fiddle使用一组JS和CSS代码来创建工具提示。
在你正在使用的代码中,工具提示是基于"title"HTML属性的,你添加的所有data-*内容都没有效果。
编辑:更具体地说,基于"标题"的工具提示是由浏览器生成的,就像应用程序中的工具提示一样。它不是HTML实体,因此无法设置样式。
您似乎已经从其他代码/页面复制/粘贴了这些数据属性,而不知道它们是什么。也许是使用Bootstrap:http://getbootstrap.com/javascript/#tooltips
无论如何,为了回答您的问题,您不能更改基于"标题"的工具提示的颜色。
但是,如果你正在创建一个新网站,请毫不犹豫地查看Bootstrap。
最佳,
首先为工具提示添加另一个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
)};
希望这能有所帮助!