web-dev-qa-db-ja.com

Twitterを維持するBootstrapツールチップをmouseleaveで開いたままにする

特定のケースと要素については、Bootstrapデフォルトで（ページがロードされた後）ツールチップを表示する必要があります（マウスオーバーとマウスアウトでも）常に開いたままにします。

これは、要素でデフォルトでツールチップを開くために使用するコードです。

$('#myelement').tooltip('show');

マウスオーバーとマウスアウトでのツールチップのデフォルトのアクションを防止/無効にする方法がわかりません。何か案が？

前もって感謝します！

javascriptjquerytwitter-bootstraptooltippreventdefault
15
John

解決策が見つかりました。手動トリガーがトリックを実行します-更新されたコードは次のとおりです。

$('.taskTooltip').tooltip({trigger: 'manual'}).tooltip('show');
25
John

Showの後にunbind（）を使用します。これにより、すべてのイベントハンドラーが削除されるため、ツールチップがmouseleaveで非表示になりません。

$(".circle").tooltip("show");
$(".circle").unbind();
.circle{
margin-left:100px;
margin-top:80px;
width:10px;
height:10px;
background-color:#0088ff;
border-radius:50%;
border:1px solid #ff8800;

}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="circle" data-toggle="tooltip" data-placement="top" title="Hello World !"></div>
3
PhilMaGeo

あなたもこれを試すことができます。

Jsfiddle： https://jsfiddle.net/shuNaka/o1ncd6r7/

js：

$('.switch').on('click touch', function (e) {
  $('.tltip-element').not($(this).parents('.tltip-wrapper').find('.tltip-element')).fadeOut('fast');
  $(this).parents('.tltip-wrapper').find('.tltip-element').fadeToggle('fast');
});

html：

<div>
  <div class="tltip-wrapper">
    <a href="#" class="switch">
      click me 1 </a>
      <div class="tltip-element" style="display: block;">
        <div class="tltip-content">
          <span>
            test_1
          </span>
          <span class="">
            test_2
          </span>
        </div>
      </div>
  </div>
</div>

css：

.tltip-wrapper {
  position: relative;
  cursor: default;
}

.tltip-wrapper .tltip-element {
  color: #525252;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 6px 12px rgba(155, 183, 182, 0.4);
  border: solid 1px #83A7AD;
  border-radius: 3px;
  padding: 12px 12px 12px 12px;
  font-size: 12px;
  text-align: left;
  display: none;
  position: absolute;
  left: 10%;
  top: -10%;
}

.tltip-wrapper .tltip-element .tltip-content {
  line-height: 0;
}
0
lechat