Bootstrap Tooltips набор пользовательских сообщений заголовка

Question

В моем проекте я использую Bootstrap Tooltips так:

$(function() { 
     $("[rel='tooltip']").tooltip(); 
    //So if I hove over delete, I'll get the delete tooltips message. 
    }); 

затем

<a rel="tooltip" title="This is a very long tooltip message!" data-placement="right">test</a> 

Можно ли каким-то образом все это сделать так, чтобы я не» t нужно включить сообщение подсказки в ссылку там? Вместо этого я хотел бы сохранить текст всплывающей подсказки в другом месте и использовать его в зависимости от того, что такое всплывающая подсказка.

Для примера:

<a rel="tooltip" class="Delete">Link 1</a> 
<a rel="tooltip" class="Add">Link 2</a> 

deleteMsg = "Click to delete this folder"; 
addMsg = "Click to add a folder"; 

$(function() { 
    $("[rel='tooltip']").tooltip(); 
}); 

Как можно что-то подобное можно сделать?

Answer 1

Вы можете поместить все свои всплывающие подсказки в объект, связанный с классом элемента. Что-то вроде этого:

var tooltips = { 
    Delete: 'Click to delete this folder', 
    Add: 'Click to add a folder' 
} 

$(function() { 
    $("[rel='tooltip']").each(function() { 
     $(this).tooltip({ 
      title: tooltips[$(this).prop('class')]; 
     }); 
    }); 
}); 

В то время как это может работать, и, возможно, лучше разделение интересов, это ужасающе некрасиво, и очень легко ломаются, просто изменив свойство класса.

Я бы порекомендовал вам придерживаться метода по умолчанию для всплывающей подсказки в атрибуте title элемента. Это также полезно для людей, просматривающих ваш сайт с отключенным javascript.

Answer 2

Вы можете выбрать переменные подсказку на основе имени класса

<a rel="tooltip" class="delete" href="#">Link 1</a> 
<a rel="tooltip" class="add" href="#">Link 2</a> 

<script> 
var deleteMsg = "Click to delete this folder"; 
var addMsg = "Click to add a folder"; 

$(function() { 
    $("[rel='tooltip']").each(function() { 
     $(this).tooltip({ title: eval($(this).attr('class') + "Msg") }); 
    }); 
}); 
</script>