javascript - 新しいツールチップが表示されるように要素を更新します (jQuery/Javascript で)

Question

ブートストラップ ツールチップを使用してタイトルにカーソルを合わせたときにタイトルを表示する html 要素があります。ただし、この要素をクリックするとツールチップが変更されますが、マウスを要素から離して再度要素にカーソルを合わせるまで、新しいツールチップは表示されません。

上記のボタンがクリックされたときにツールチップがすぐに表示されるようにします。どうすればこれを達成できますか？より良い言葉がない場合、html要素を「リフレッシュ」する方法はありますか?

Answer 1

この方法を試してください

デモ ：

http://jsfiddle.net/dreamweiver/9z404crn/

$(document).ready(function() {
  $('#example').tooltip();
  $('#example').on('click', function() {
    $(this).attr('data-original-title', 'changed tooltip');
    $('#example').tooltip();
    $(this).mouseover();
  });
});

h3 {
  margin-top: 50px;
}

<h3>
  Sensors Permissions
  <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

ノート：

上記のロジックは Bootstrap バージョン2.3.2以下でのみ機能しますが、 @NabiK.AZが提供するソリューションは Bootstrap lib の最新バージョンで機能します。

ハッピーコーディング:)

Answer 2

次のコードを使用できます。

var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);

ブートストラップ 3.3.4 でテストします

ここで見ることができます：

http://jsfiddle.net/NabiKAZ/a4WwQ/1029/

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
});

$('.mytooltip').hover(function() {
  $('.mytooltip').tooltip('show');
});

$('.mytooltip').click(function() {
  var newTooltip = 'Changed this tooltip!';
  $(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});

.cart {
  overflow: hidden;
  padding: 10px 3px;
  background: yellow;
}

<div class="cart">
  <a data-toggle="tooltip" title="add to cart" class="mytooltip">
    <i class="icon-shopping-cart"></i>
  </a>
</div>

<br>

<div>
  <a data-toggle="tooltip" title="add to another cart" class="mytooltip">
    <i class="icon-shopping-cart"></i>
  </a>
</div>


<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
  About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/>  Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
  <div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

Answer 3

2021 年、Bootstrap 5: このプロパティを更新しますdata-bs-original-title。

次のように、これで Razor / Blazor を使用することもできます。

var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
    <img class="zoom-on-hover cursor-pointer fit-image grayout"
            src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
            data-bs-toggle="tooltip" data-placement="bottom"
            data-bs-original-title="@title" />
</div>