jQuery cụ Tooltip - Thay đổi Tiêu đề

Question

Got một vấn đề với các công cụ plugin jquery tooltip (http://flowplayer.org/tools/tooltip/index.html) tôi cần phải thay đổi tiêu đề của nguyên tố này ..

reloadTooltip(); 
    $("#example").attr('title', obj.text); 
    reloadTooltip(); 

    function reloadTooltip(){ 
     $("[title]").tooltip({ position: "bottom right", opacity: 1 }); 
    } 

Html Phần:

<span title="text" id="example"></span> 

với giải pháp của tôi tôi đã nhận cuối cùng 2 danh hiệu, chồng lên nhau. Các unstyled (bỏ qua js), là cái mới. Tiêu đề chú giải công cụ chưa thay đổi.

cảm ơn bạn

Answer 1

tôi sắp làm điều tương tự. Tôi đã xem qua mã plugin của Tooltip và phát hiện ra cách nhanh chóng và dễ dàng để cập nhật chú giải công cụ. Plugin loại bỏ thuộc tính title và đặt nội dung đó vào một thuộc tính phần tử có tên là tooltipText. Trong jQuery 1.6 +, nó có thể được thao tác như sau:

// get the current tooltip content 
$('#someElement').prop('tooltipText') 

// set the tooltip content 
$('#someElement').prop('tooltipText', 'w00t'); 

Plugin thiết đặt thuộc tính tooltipText (lưu ý giá trị vốn hóa) tại dòng 55 trong phiên bản 1.3. Thay đổi thực hiện theo cách này là tức thời như xa như tôi có thể nói.

Nếu làm thao tác yếu tố trực tiếp, nội dung tooltip là tại địa chỉ:

var e = document.getElementById('#someElement'); 
alert(e.tooltipText); 
e.tooltipText = 'w00t'; 

Answer 2

Làm thế nào về điều này?

initTooltip(); 
    updateTooltip(obj.text); 


    function initTooltip(){ 
     $("[title]").tooltip({ position: "bottom right", opacity: 1 }); 
    } 

    function updateTooltip(text){ 
     $("[title]").attr('title', text); 
     $("[title]").data('title',text); 
     $("[title]").removeAttr("title"); 
    } 

Tôi không biết đó có phải là cách tiếp cận tốt nhất nhưng tôi nghĩ nó có thể phù hợp với bạn.

---

obj.text có đúng không? Cái gì có trong obj.text?

Answer 3

Cố gắng sửa đổi giá trị tiêu đề bằng cách gọi phương thức dữ liệu của jQuery ("tiêu đề").

Answer 4

Không biết nếu bạn vẫn đang tìm câu trả lời cho điều này nhưng tôi đã dành một vài giờ tốt cố gắng sắp xếp cùng một điều và đã tìm thấy câu trả lời (đơn giản như họ luôn luôn có khi bạn tìm thấy chúng!) trong tài liệu API.

Bất kể yếu tố nào là bạn đặt chú giải công cụ ở vị trí đầu tiên, nhận API công cụ từ nó và đặt giá trị mới. tức là nếu bạn đặt chú giải công cụ trên một phần tử có id "myTip"

$('#myTip').data('tooltip').getTip().html("New string!") ; 

Et thì đấy.

Bạn không cần phải xóa tiêu đề (và không được sao chép như chú giải công cụ được khởi tạo lười). Thay vì sử dụng cấu hình cancelDefault:

http://flowplayer.org/tools/tooltip/index.html

Answer 5

Một giải pháp khác để thay đổi tiêu đề tự động là sử dụng sự kiện onBeforeShow:

jQuery('#myselector').tooltip({onBeforeShow: tooltipBeforeShow}); 

... 

function tooltipBeforeShow() { 
    // On production you evaluate a condition to show the apropiate text 
    var text = 'My new text for the <b>tooltip</b>'; 
    this.getTip().html(text); 
} 

this đề cập đến đối tượng tooltip vào chức năng sự kiện

Answer 6

Tôi cũng phải vật lộn với điều này.Và mã này làm việc cho tôi:

$('.yourelement').attr('tooltipText', newToolTip); 

Xin lưu ý trường hợp trên T. Chữ thường T sẽ không hoạt động.

Answer 7

tải xuống! theo phiên bản mới nhất của chú giải công cụ (như của v2.3.1) https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L272 bạn cần đặt thuộc tính (không phải thuộc tính) 'dữ liệu-tên gốc' bởi vì chú giải công cụ này hiện đang sử dụng.

Đó là một hack nhưng tôi hy vọng nó hoạt động cho bạn vì nó làm việc cho tôi.

$('#example').attr('data-original-title','the new text you want'); //and that's it. 

Answer 8

Không có gì làm việc cho tôi, nhưng để reinitialize các tooltip:

 //Save the current configuration. 
     var conf = trigger.data('tooltip').getConf(); 
     trigger.removeData('tooltip').unbind(); 
     //Add the changed text. 
     var newText = 'Hello World!'; 
     trigger.attr("title", newText); 
     //Reapply the configuration. 
     trigger.tooltip(conf); 

Những câu trả lời trước đó liên quan đến getTip() yêu cầu các tooltip được hiển thị ít nhất một lần; nếu không, getTip() mang lại giá trị rỗng.

Sử dụng OnBeforeShow gần như đã làm việc cho tôi, nhưng tôi không thể tìm ra cách hủy liên kết sự kiện để nó không thực thi mỗi lần tôi trình chiếu.

Thay đổi tiêu đề không hoạt động đối với tôi vì một số lý do, có thể do thực tế tôi đang sử dụng bố cục tùy chỉnh.

Answer 9

Chú giải công cụ tốt nhất cho tôi! Đây tooltip như trên Gmail

trên trang web của sở chính:

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
<script type='text/javascript' src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script> 
<link rel="stylesheet" type="text/css" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css"> 

Mở HTML:

<a class="example" href="#" original-title="Hello World">Hover over me</a> 

<br/> 

<a class="example" href="#" original-title="Hello World">Hover over me</a> 

<br/> 

<a class="example" href="#" original-title="Hello World">Hover over me</a> 

Mở mã Javascript:

$(function() { 
    $('.example').tipsy(); 
}); 

Visit Demo jsfiddle

Answer 10

Tất cả những điều trên không làm việc với phiên bản mới nhất của tooltipster, cách chính xác là:

$('#help').data($('#help').data('tooltipsterNs')[0]).Content="new content"; 

Answer 11

Tất cả các tùy chọn khác không làm việc trên phiên bản cuối cùng của tooltipster (3.3.0) tôi thấy công việc này lệnh:

$('#selectorElement').tooltipster('content', 'new title'); 

Answer 12

này đã làm việc cho tôi:.

$ (attr '# yourID') ('dữ liệu gốc-danh hiệu', 'New Message') tooltip (. 'sh ow ') tooltip (' ẩn ');