通过JQuery向Bootstrap添加工具提示

Question

我正在尝试向我的DOM中具有特定类的所有元素添加标准工具提示。这是我的所作所为：

HTML：

$(document).ready(function(){
	add_standard_tooltips();
  });
  
  
function add_standard_tooltips(){
	$('.has_standard_tooltip').attr('data-toggle', 'tooltip');
	
	// Add tooltip text specific to classes 
	$('.zeon-edit-pencil').attr('title', 'My Tooltip text');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'zeon-edit-pencil has_standard_tooltip'>Edgar
</div>

代码工作正常，唯一的例外是工具提示没有出现在Bootstrap样式（黑色背景和白色文本）中，它看起来像标准的html工具提示。我在这里做错了什么？！

更新1： 我想，Stackoverflow代码片段工具中没有Bootstrap，所以我提供JSFiddle以防万一

更新2： 这是我项目中的原始代码：                                                                                                           

Answer 1

我更新了你的小提琴：jsfiddle.net/4354jy5v/1/

您忘记初始化工具提示

$('[data-toggle="tooltip"]').tooltip();

只是fyi：确保在jquery.js之后总是包含bootstrap.js