html - Twitter Bootstrap のツールチップをポップオーバーのように (タイトル行なしで) 表示するにはどうすればよいですか?

Question

Twitter Bootstrap ツールチップ スタイルをpopover stylesに置き換えたいと思います。どうやってやるの？

ツールチップはデフォルトで次のように表示されます。

デフォルトでは、ポップオーバーは次のようになります。

ポップオーバーと同じように、ツールチップを白く、枠を灰色にしたいと思います。

手伝ってくれますか？

Answer 1

JQuery UI がブートストラップに干渉しています。

多くの機能が重複しているため、実際には相互に互換性がありません。

数週間前にこの問題が発生し、このページを見つけましたが、「正常に機能する」はずのカスタム css を追加したくなかったのです。今日 (別の理由で) JQuery UI を削除した後、ツールチップが意図したとおりに見えるようになったことに気付きました。これは古い質問であることは知っていますが、数週間前にこの回答が役に立ったと思います。

Answer 2

JS

$(function() {
    $('[title]').attr("data-rel", "tooltip");
    $("[data-rel='tooltip']")
        .attr("data-placement", "top")
        .attr("data-content", function() {
            return $(this).attr("title")
        })
        .removeAttr('title');


    var showPopover = function() {
        $(this).popover('show');
    };
    var hidePopover = function() {
        $(this).popover('hide');
    };
    $("[data-rel='tooltip']").popover({
        trigger: 'manual'
    }).click(showPopover).hover(showPopover, hidePopover);

});

そしてシンプルHTML

<h1 title="This is title">What is this</h1>

Answer 3

これが、右側のツールチップで私にとってうまくいったものです。

矢印と同じサイズの CSS 三角形を取り、境界線の幅と同じ距離だけ Bootstrap 三角形から引き離しました。必要に応じて適応させてください。任意の方向を指す三角形を作成する方法については、この素晴らしい記事を参考にしてください。

http://css-tricks.com/snippets/css/css-triangle/

.tooltip .tooltip-inner {
  background: white;
  color: black;
  border: 3px solid black;
  padding: 10px;
  line-height: 1.65em;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -15px;
  border-right-color: white;
  border-width: 15px 15px 15px 0;
}
.tooltip.right .tooltip-arrow:after {
  content: " ";
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid black;
  top: -15px;
  left: -3px;
}