我正在使用 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
的位置.这会让你接近它,但它可能需要更多的调整......
.tooltip-箭头 CSS
.tooltip.right .tooltip-arrow{
top: 5%;
margin-top: 0px;
}
.tooltip.top .tooltip-arrow{
left: 6%;
bottom:1px;
}
用于调整工具提示位置的 jQuery 函数..
$("[data-placement=right]").hover(function(){
$('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 8 + 'px')
});
Demo on Bootply
编辑:您也可以仅使用 CSS 定位 .tooltip。 Alternate demo
.tooltip.right {
margin-top:8px;
}
关于twitter-bootstrap - 将 Bootstrap 的工具提示对齐到元素的左侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16618933/