12

Bootstrap のツールチップ スクリプトを使用していますが、切り捨てられたテキストにツールチップがあると問題が発生します。私は CSS を使用してテキストを切り詰めており、そのテキストにツールチップを表示して、マウスオーバーしてテキスト全体を表示できるようにしています。私の問題は、テキストが切り捨てられた場合でも、ツールチップが切り捨てられていないかのように要素の中央に表示されることです。

この問題は別として、とにかく次のようにスタイルすることをお勧めします。ツールチップが要素の左側に配置され、ツールチップの矢印も左側に移動するようにしたいと思います。または、ツールチップが要素の横にある場合は、上に揃えられ、矢印が上にあります。

基本的に、現在は次のようになっています。

             ################
             # TOOLTIP      #
             ################
                    v
Some really long text th...

次のようにしたいと思います。

################
# TOOLTIP      #
################
 v
Some really long text th...

または、このような側で：

################ > Some really long text th...
# TOOLTIP      #
################

ありがとうございました。

[編集] 矢印の動きを理解しました。これは単純な css です。しかし、ツールチップ自体の位置合わせは JavaScript の一部のようです。

4

2 に答える 2

8

tooltip-arrowCSSと全体の位置を調整する必要があると思いますtooltip。これにより、それに近づくことができますが、さらに微調整が必​​要になる場合があります...

.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')
});

Bootply のデモ

編集: CSS のみで .tooltip を配置することもできます。代替デモ

.tooltip.right {
    margin-top:8px;
}
于 2013-05-18T12:14:28.210 に答える