4

ajax を使用してコンテンツ (HTML) を Web サイトにロードしています。これには、特に次のスニペットが含まれます。

<a href="#" data-toggle="tooltip" title data-original-title="My tooltip text...">Hover me...</a>

ここで説明したように: bootstrap 3 > tooltip、初期化する必要があります。ajaxの成功後にどのように初期化できますか? 編集：完全な実例。ここでは、「ajax 呼び出し」をシミュレートします。問題は持続時間です。タイムアウトを削除すると、次のように機能します。

<!DOCTYPE html>
<html lang="de">
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
	</head>	
	<body>
	
		<div id="html" style="margin-top: 50px;">
			That works: <a href="#" data-toggle="tooltip" title="" data-original-title="My tooltip 1 text">Hover me 1...</a>
		</div>
		
		<div style="margin-top: 50px;">Ajax: <span id="ajax"></span></div>


		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		<script type="text/javascript">
			// Document ready
			$(document).ready(function ()
			{
				loadResult();
				activateTooltip();
			});

			// Result
			function loadResult()
			{
				// "Ajax call"			
				setTimeout(function(){
                    var result = '<a href="#" data-toggle="tooltip" title="" data-original-title="My tooltip 2 text">Hover me 2...</a>';
					$("#ajax").html(result);
				}, 2000); // Simulate Ajax duration

				activateTooltip();
			}

			// Tooltip
			function activateTooltip()
			{
				$('[data-toggle="tooltip"]').tooltip();
			}
		</script>

	</body>
</html>

4

1 に答える 1

1

https://plnkr.co/edit/KBsJK27F9Sb5kV2Ozy56

  <a href="#" data-toggle="tooltip" data-original-title="Tooltip Right works fine" data-placement="right">Hover me...</a>

ajaxの成功でツールチップ機能を再アクティブ化します：

function loadResult()
{
    $.ajax({
        type: "POST",
        url: "index.php?action=loadResult",
        data: "id=1",
        dataType: 'text',
        success: function(data){
            var json = $.parseJSON(data);
            $("#result").html(json.result);
            activateTooltip();
        }
    });
}

この属性を追加するだけです： data-placement="right"

于 2016-01-29T12:02:46.463 に答える