加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

twitter-bootstrap – 将Bootstrap的工具提示对齐到元素的左边?

发布时间:2020-12-18 00:26:40 所属栏目:安全 来源:网络整理
导读:我正在使用 Bootstrap’s工具提示脚本,当我在截断的文本上有工具提示时遇到问题.我使用CSS截断文本,然后在该文本上有一个工具提示,以便您可以鼠标悬停并查看全文.我的问题是,当文本被截断时,工具提示仍然以元素为中心,就像没有被截断一样. 除了这个问题,我宁
我正在使用 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;
}

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读