如何將div文本更改爲bootstrap中的工具提示？

這是我的div如何將div文本更改爲bootstrap中的工具提示？

<div class="classdiv">11</div> 
<div class="classdiv">22</div> 
<div class="classdiv">33</div> 
<div class="classdiv">44</div> 
<div class="classdiv">55</div> 
<div class="classdiv">66</div>

我需要改變這個div文本使用Jquery的到工具提示，因爲我不能手動更改它，有這麼多（http://getbootstrap.com/javascript/#tooltips）。因此，用戶無法首先看到div的文本。當他懸停時，文本出現在工具提示中。我知道如何使刀尖，

<div class="classdiv" data-toggle="tooltip" data-placement="left" title="11">11</div> 
$(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
})

但這裏的問題是，我不能手動數據切換=「提示」和標題添加到每個classdiv，監守有 500多名DIV 。所以我需要一個解決方案在jquery中，cab爲每個classdiv添加 data-toggle =「tooltip」，並將值轉換爲標題。

還怎麼我可以改變這個文本任何屬性，例如 <div class="classdiv">11</div>指定這個值<div class="classdiv" val="11" ></div> 請幫助。

來源

2016-11-21 Ram

添加此腳本'$（函數（）{$ （ '[數據肘節=提示]'）工具提示（）; }）;'你還需要改變你的div並插入'data-toggle'和'title'屬性。 – claudios

你將不得不環路的所有div從格文本設置各自的提示文本

TRY THEME DEMO

// loop each classdiv and add data-toggle and title attributes 
 
$('.classdiv').each(function(ndx, elem) { 
 
    var $elem = $(elem); 
 
    var text = $elem.text().trim(); 
 
    $elem.attr('title', text) // set title attribute 
 
     .text('') // empty the text 
 
     .data('toggle', 'tooltip') // add data-toggle = tooltip 
 
     .tooltip(); // activate bootstrap tooltip 
 
})

.classdiv { 
 
    width: initial; 
 
    display: inline-block; 
 
    margin: 45px 20px; 
 
    padding: 10px; 
 
    background: grey; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="classdiv">11</div> 
 
<div class="classdiv">22</div> 
 
<div class="classdiv">33</div> 
 
<div class="classdiv">44</div> 
 
<div class="classdiv">55</div> 
 
<div class="classdiv">66</div>

來源

2016-11-21 06:39:12 four

謝謝。這是我的預期。 – Ram

對於改變內部<div class="classdiv">11</div>文本中引導工具提示你需要使用

data-toggle="tooltip"

在你的DIV，把文本內

title="<your text here>"

例子：

<div class="classdiv" data-toggle="tooltip" title="11"></div>

而且使用引導程序的data-placement="top"屬性可以將工具提示放置到上/下/左/右。演示，請參閱： https://jsfiddle.net/koyvnzc1/

希望它可以幫助

來源

2016-11-21 05:50:42 Rahul

我需要使用jquery將此div文本更改爲tooltip，因爲我無法手動更改它 – Ram

這是代碼只是一個單一的線。請參閱小提琴here。

腳本運行提示：

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

更改您的div弄成象下面這樣：

<div class="classdiv" data-toggle="tooltip" title="Howdy! I'm a fckn tooltip" data-placement="bottom"></div>

來源

2016-11-21 06:16:54 claudios

如何將div文本更改爲bootstrap中的工具提示？

回答

相關問題