Ẩn chú giải công cụ gốc bằng cách sử dụng jQuery

Question

Có cách nào để ẩn hành động chú giải công cụ gốc khi người dùng di chuột qua thẻ liên kết có thuộc tính tiêu đề không? Tôi không muốn loại bỏ nó chỉ không hiển thị hộp màu vàng khó chịu đó là hành động tooltip mặc định.

UPDATE:

Sau khi đọc một vài bài viết khác tôi không nghĩ rằng tôi có thể ẩn các thuộc tính tiêu đề cho hành động tooltip bản xứ, nhưng tôi đang cố gắng để nghĩ rằng bên ngoài của hộp đây. Tôi có thể sử dụng thuộc tính khác thay vì thuộc tính tiêu đề bên trong thẻ neo và vẫn giữ một trang hợp lệ không ???

Xóa giá trị thuộc tính tiêu đề không phải là tùy chọn trừ khi ai đó có thể tìm ra cách thêm lại giá trị đó cho sự kiện onclick?

LÀM VIỆC MÃ DƯỚI

$('[title]').each(function() { 
    var $this = $(this); 
    $this.data('title',$this.attr('title')); 
    $this.removeAttr('title'); 
}); 

$('a').click(function() { 
    var $this = $(this); 
    var title = $this.data('title'); 
    ... do your other stuff... 
}); 

Answer 1

Rõ ràng thuộc tính tiêu đề không thuộc các xử lý sự kiện bình thường. Dù sao, câu trả lời ban đầu của tôi đã không hoạt động, mặc dù tôi sẽ tiếp tục chơi với nó để xem tôi có thể làm cho nó hoạt động được không. Nếu bạn cần giữ lại thuộc tính tiêu đề nhưng không muốn hiệu ứng bật lên, như được chỉ ra trong các nhận xét của bạn, sau đó lưu trữ thuộc tính tiêu đề trong dữ liệu của phần tử và sử dụng nó từ đó.

$('[title]').each(function() { 
    var $this = $(this); 
    $this.data('title',$this.attr('title')); 
    $this.removeAttr('title'); 
}); 

$('a').click(function() { 
    var $this = $(this); 
    var title = $this.data('title'); 
    ... do your other stuff... 
}); 

Original câu trả lời:

Cho mỗi phần tử có một tiêu đề một hover cụ thể qua xử lý nhằm ngăn ngừa các hành động mặc định.

$('[title]').hover(
    function(e) { 
     e.preventDefault(); 
    }, 
    function() { } 
); 

Trừ khi thử nghiệm có vẻ không hoạt động.

Answer 2

Bạn có thể loại bỏ nó bằng cách:

$("a").removeAttr("title"); 

Điều này sẽ loại bỏ nó chỉ js-người sử dụng, do đó, nó vẫn thể truy cập và có thể tìm thấy cho công cụ tìm kiếm.

Answer 3

Để có được nó ra khỏi danh hiệu, tôi sẽ sử dụng các dữ liệu() phương pháp:

$(document).ready(function() { 
    $('.items_with_title').each(function() { 
     $(this).data('title', $(this).attr('title')); 
     $(this).removeAttr('title'); 
    }); 
}); 

// to access it 
$(document).ready(function() { 
    $('A').click(function() { 
     alert($(this).data('title')); 
    }); 
}); 

Bạn cũng có thể làm cho bộ chọn cho bất kỳ mục mà có một thuộc tính tiêu đề:

$('*[title]').each(... 

Answer 4

var tempTitle = ""; 
$('a[title]').hover(
    function(e){ 
     e.preventDefault(); 
     tempTitle = $(this).attr('title'); 

     $(this).attr('title', ''); 

      $(this).mousedown(
       function(){ 
        $(this).attr('title', tempTitle); 
       } 
      ); 
    } 
    , 
    function() { 
     $(this).attr('title', tempTitle); 
    } 
); 

Hãy thử nó hoạt động như một con chó!

Answer 5

Đây là một spin-off mà bạn có thể thấy hữu ích trong trường hợp bạn sử dụng một JS Plugin lightbox rằng vẫn cần những "danh hiệu" thuộc tính cho việc xử lý tiêu đề trên slide lightbox:

$('a.lightbox-trigger').each(function() { // Process all lightbox trigger links 

    $(this).mouseover(function() { 
     if(!$(this).data('keep')) // 1st time = FALSE, so make the swap 
      $(this).attr('data-title', $(this).attr('title')).attr('title', ''); 
     $(this).data('keep', true); // Preserve value if hovered before clicked 
    }); 

    $(this).mousedown(function() { 
     $(this).attr('title', $(this).attr('data-title')).attr('data-title', ''); 
     $(this).data('keep', false); // Mark element as safe to swap again 
    }); 
}); 

Answer 6

Tôi biết đây là gửi về jquery nhưng tôi chỉ chạy trong vấn đề này và chủ yếu được kết nối với lighboxes vì ​​vậy đây là Mootools sửa chữa cho iaian7 MediaBox nâng cao trên các liên kết hình ảnh nếu có ai cần nó Việc sửa chữa sẽ làm việc trên bất kỳ trong số này cũng http://line25.com/articles/rounding-up-the-top-10-mootools-lightbox-scripts

if ($$('.lbThumb').length > 0) { // lbThumb a class or what ever you are using 
    $$('.lbThumb').each(function (el) { // same here , your a class 

     var savedtitle = el.get('title'); 
     var getimage = el.getElement('img'); 
        // must use image click since Mediabox will kill our a element click 
     getimage.addEvent('click', function() { 
      el.set('title',savedtitle); 
     }); 
     // hide nasty a tooltip 
     el.addEvents({ 
     mouseenter: function() { 
      el.erase('title'); 
     }, 
     // bring it back 
     mouseleave: function() { 
      el.set('title',savedtitle); 

     } 
     }); 

    }); 
} 

Answer 7

Tôi đã sử dụng một biến thể trên mã bEj ni c bEj, bởi vì tôi cần phải bảo toàn nội dung tiêu đề khi di chuột nhưng vẫn cần phải chặn hành vi mặc định.

// Suppress default tooltip behavior on hover 
var tempTitle = ""; 
$('abbr[title],dfn[title],span.info-tip[title],').hover(
function(e){ 
    e.preventDefault(); 
    tempTitle = $(this).attr('title'); 

    $(this).attr('title', ''); 
     // add attribute 'tipTitle' & populate on hover 
     $(this).hover(
      function(){ 
       $(this).attr('tipTitle', tempTitle); 
      } 
     ); 
    }, 
    // restore title on mouseout 
    function() { 
    $(this).attr('title', tempTitle); 
    } 
); 

này cho phép tôi làm điều này trong stylesheet của tôi: /* abbr & tooltip styles: first, the immediate descendants of the content area are set to highlight abbreviations on hover, but avoiding lists; as we don't want *all* abbreviations highlighted when you hover on a root list */

abbr, 
abbr[tipTitle], 
dfn, 
dfn[tipTitle], 
span.info-tip, 
span.info-tip[tipTitle] { 
border-bottom:none; /*remove border 1st, then let following rules add it back in*/ 
} 

p:hover abbr[tipTitle], 
li:hover abbr[tipTitle], 
dl>*:hover abbr[tipTitle], 
label:hover abbr[tipTitle], 
p:hover dfn[tipTitle], 
li:hover dfn[tipTitle], 
dl>*:hover dfn[tipTitle], 
label:hover dfn[tipTitle], 
p:hover span.info-tip[tipTitle], 
li:hover span.info-tip[tipTitle], 
dl>*:hover span.info-tip[tipTitle], 
label:hover span.info-tip[tipTitle] 
{ 
position: relative; 
text-decoration: none; 
border-bottom: 1px dotted #333; 
cursor: help; 
} 

p:hover abbr[tipTitle]:before, 
li:hover abbr[tipTitle]:before, 
dl>*:hover abbr[tipTitle]:before, 
label:hover abbr[tipTitle]:before, 
p:hover dfn[tipTitle]:before, 
li:hover dfn[tipTitle]:before, 
dl>*:hover dfn[tipTitle]:before, 
label:hover dfn[tipTitle]:before, 
p:hover span.info-tip[tipTitle]:before, 
li:hover span.info-tip[tipTitle]:before, 
dl>*:hover span.info-tip[tipTitle]:before, 
label:hover span.info-tip[tipTitle]:before { 
content: ""; 
position: absolute; 
border-top: 20px solid #803808; 
border-left: 30px solid transparent; 
border-right: 30px solid transparent; 
visibility: hidden; 
top: -18px; 
left: -26px; 
} 

p:hover abbr[tipTitle]:after, 
li:hover abbr[tipTitle]:after, 
dl>*:hover abbr[tipTitle]:after, 
label:hover abbr[tipTitle]:after, 
p:hover dfn[tipTitle]:after, 
li:hover dfn[tipTitle]:after, 
dl>*:hover dfn[tipTitle]:after, 
label:hover dfn[tipTitle]:after, 
p:hover span.info-tip[tipTitle]:after, 
li:hover span.info-tip[tipTitle]:after, 
dl>*:hover span.info-tip[tipTitle]:after, 
label:hover span.info-tip[tipTitle]:after { 
content: attr(tipTitle); 
position: absolute; 
color: white; 
top: -35px; 
left: -26px; 
background: #803808; 
padding: 5px 15px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
white-space: nowrap; 
visibility: hidden; 
} 

p:hover abbr[tipTitle]:hover:before, 
li:hover abbr[tipTitle]:hover:before, 
dl>*:hover abbr[tipTitle]:hover:before, 
label:hover abbr[tipTitle]:hover:before, 
p:hover dfn[tipTitle]:hover:before, 
li:hover dfn[tipTitle]:hover:before, 
dl>*:hover dfn[tipTitle]:hover:before, 
label:hover dfn[tipTitle]:hover:before, 
p:hover span.info-tip[tipTitle]:hover:before, 
li:hover span.info-tip[tipTitle]:hover:before, 
dl>*:hover span.info-tip[tipTitle]:hover:before, 
label:hover span.info-tip[tipTitle]:hover:before, 
p:hover abbr[tipTitle]:hover:after, 
li:hover abbr[tipTitle]:hover:after, 
dl>*:hover abbr[tipTitle]:hover:after, 
label:hover abbr[tipTitle]:hover:after, 
p:hover dfn[tipTitle]:hover:after, 
li:hover dfn[tipTitle]:hover:after, 
dl>*:hover dfn[tipTitle]:hover:after, 
label:hover dfn[tipTitle]:hover:after, 
p:hover span.info-tip[tipTitle]:hover:after, 
li:hover span.info-tip[tipTitle]:hover:after, 
dl>*:hover span.info-tip[tipTitle]:hover:after, 
label:hover span.info-tip[tipTitle]:hover:after { 
visibility: visible; 
transition: visibility 0s linear .3s; 
-moz-transition: visibility 0s linear .3s; 
} 

Cho tôi tooltips khá nơi tôi cần đến chúng, nếu không có sự tooltip mặc định xuất hiện cùng một lúc.

Answer 8

Biểu ngữ gốc chỉ muốn vô hiệu hóa hành động gốc của .tooltip(). Nếu đó là trường hợp, sử dụng các giải pháp đơn giản sau đây:

$(function() { 
    $(document).tooltip({ 
     items: "[data-tooltip]", 
     content: function() { 
      var element = $(this); 
      if (element.is("[data-tooltip]")) { 
       return element.attr('data-tooltip'); 
      } 
     } 
    }); 
}); 

Bây giờ [title] thuộc tính bị vô hiệu hóa và tooltip sẽ chỉ kích hoạt khi một phần tử có một [dữ liệu tooltip] thuộc tính. Bằng việc xác định thêm 'mục' bạn có thể tạo hành vi khác nhau và phong cách:

$(function() { 
    $(document).tooltip({ 
     items: "[data-tooltip],img[alt]", 
     content: function() { 
      var element = $(this); 
      if (element.is("[data-tooltip]")) { 
       return element.attr('data-tooltip'); 
      } 
      if (element.is("[alt]")) { 
       return element.attr('alt') + something_else; 
      } 
     } 
    }); 
}); 

http://jqueryui.com/tooltip/#custom-content & http://api.jqueryui.com/tooltip/#option-items

Answer 9

tác phẩm của nó như thế này:

Đổi tên để sTitle thay vì thuộc tính tiêu đề mặc định và nếu bạn cần gọi nó từ Jquery:

getAttribute ('stitle')

Nó hoạt động trên tất cả.

Answer 10

Bạn có thể móc sự kiện 'mouseenter' và trả về false sẽ dừng hiển thị chú giải công cụ gốc.

$(selector).on('mouseenter', function(){ return false; });

Answer 11

var title; 
$('a[title]').hover(function() { 
    title = $(this).attr('title'); 
    $(this).attr('title',''); 
}, function() { 
    $(this).attr('title',title); 
});