4

我正在使用 ajax 将内容 (HTML) 加载到我的网站。这包括，除其他外，这个片段：

<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 回答