我正在使用
Bootstrap’s工具提示脚本,当我在截断的文本上有工具提示时遇到问题.我使用CSS截断文本,然后在该文本上有一个工具提示,以便您可以鼠标悬停并查看全文.我的问题是,当文本被截断时,工具提示仍然以元素为中心,就像没有被截断一样.
除了这个问题,我宁愿像下面的样子一样.我想要这样做,所以工具提示对齐在元素的左侧,工具提示上的箭头也会向左移动.或者如果工具提示位于元素的侧面,那么它将与顶部对齐,箭头位于顶部.
基本上它现在看起来像这样：
################
# TOOLTIP #
################
v
Some really long text th...
我希望看起来像这样：
################ # TOOLTIP # ################ v Some really long text th...
或者在这样的一边：
################ > Some really long text th... # TOOLTIP # ################
谢谢.
[编辑]我已经完成了箭头的移动,这只是简单的CSS.但是工具提示本身的对齐似乎是javascript的一部分.
解决方法
我想你需要调整tooltip-arrow CSS和整个工具提示的位置.这将让你接近它,但它可能需要更多的调整…
.tooltip-arrow CSS
.tooltip.right .tooltip-arrow{
top: 5%;
margin-top: 0px;
}
.tooltip.top .tooltip-arrow{
left: 6%;
bottom:1px;
}
$("[data-placement=right]").hover(function(){
$('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 8 + 'px')
});
编辑：您也可以使用CSS定位.tooltip. Alternate demo
.tooltip.right {
margin-top:8px;
}