Настройка ToolTip
Доброго дня.
Что то запара пошла, прошу помощи и подсказок. Есть селект <select class="form-control osc_tooltip" name="builder_rule_filter" required="required"> <option value="">Выбрать</option> <option value="above">Выше верх. линии</option> <option value="below">Ниже нижн. линии</option> <option value="down_up" title="down_up">Перес. снизу вверх</option> <option value="top_down" title="top_down">Перес. сверху вниз</option> </select> Необходимо при выборе опции сделать так, чтобы если опция имеет атрибут "title", то значение "title" вставлялось в селект и включался tooltip. Вот нацарапал код, однако он работает не совсем так, как надо
jQuery(document).on('change', '.osc_tooltip', function(){
var attrr = jQuery(this).find(":selected").is("[title]");
if(attrr){
var title = jQuery(this).find("option:selected").attr("title");
if(jQuery('.osc_tooltip').hasAttr('title')){
jQuery('.osc_tooltip').removeAttr('title data-original-title');
jQuery('.osc_tooltip').tooltip('destroy');
}
jQuery('.osc_tooltip').attr('title', title);jQuery('.osc_tooltip').tooltip();
}else{
jQuery('.osc_tooltip').removeAttr('title data-original-title');
jQuery('.osc_tooltip').tooltip('destroy');
}
});
jQuery.fn.hasAttr = function(name) {
return this.attr(name) !== undefined;
};
Когда переходишь между опциями у которой есть тайтл и у которой нет тайтла, то работает нормально, а когда переходишь между опциями у которых у обоих есть тайтл, то затык. Что не так? Заранее спасибо! |
rafaello,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery(document ).tooltip({
items : ".osc_tooltip",
content : function() {
var option = jQuery("option[value='"+this.value+"']", this);
if (option.length && option.is( "[title]" ) ) {
return option.attr( "title" );
}
}})
});
</script>
</head>
<body>
<select class="form-control osc_tooltip" name="builder_rule_filter" required="required">
<option value="">Выбрать</option>
<option value="above">Выше верх. линии</option>
<option value="below">Ниже нижн. линии</option>
<option value="down_up" title="down_up">Перес. снизу вверх</option>
<option value="top_down" title="top_down">Перес. сверху вниз</option>
</select>
</body>
</html>
|
Не, ну конечно большое спасибо!
Я наверно никогда не научусь писать так лаконично. Здесь это работает, однако у меня не работает. Я использую тему вордпресса (допиливаю). Так вот вывалились две ошибки. Первая - это то, что название переменной не может быть option. Эту ошибку я исправил, переименовав переменную. Вторая ошибка bootstrap Error: `selector` option must be specified when initializing tooltip on the window.document object! |
rafaello,
могу только гадать, что и как у вас |
что надо еще предоставить сюда, чтобы вопрос решился?
|
rafaello,
ссылку в личку напишите. |
https://github.com/gfranko/jquery.se....js/issues/336
вот здесь вроде есть |
ну да, у меня тултип на bootstrap 3
|
первая ссылка в гугле: jquery bootstrap 3 Error: `selector` option must be specified when initializing tooltip on the window.document object!
https://stackoverflow.com/questions/...be-specified-w которая ведет сюда, если первая ссылка не помогает ) https://stackoverflow.com/questions/...tion-attempted так же для тех кто ищет прям супер решение из ) того что, есть noConflict по этой же теме... |
так у меня вообще нет jquery-ui.min.js только bootstrap 3 Для него надо переписать код. Щас буду пробовать по аналогии, не знаю получится ли...
|
rafaello,
попробуйте так ...
<!doctype html>
<html lang="ru">
<head>
<title>Bootstrap 4 Tooltips - Пример работы с методами</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://itchief.ru/examples/vendors/bootstrap-4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<select class="form-control osc_tooltip" name="builder_rule_filter" required="required" >
<option value="">Выбрать</option>
<option value="above">Выше верх. линии</option>
<option value="below">Ниже нижн. линии</option>
<option value="down_up" title="down_up">Перес. снизу вверх</option>
<option value="top_down" title="top_down">Перес. сверху вниз</option>
</select>
<!-- jQuery -->
<script src="https://itchief.ru/examples/vendors/jquery/jquery-3.3.1.min.js"></script>
<!-- Popper -->
<script src="https://itchief.ru/examples/vendors/popper.js/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://itchief.ru/examples/vendors/bootstrap-4.1/js/bootstrap.min.js"></script>
<script>
jQuery(".osc_tooltip").tooltip({
title : function() {
var option = this.options[this.selectedIndex];
if (option.title) {
return option.title;
}
}})
</script>
</body>
</html>
|
Цитата:
|
Г-н рони! Спасибо вам за помощь. Получилось! Немного добавил в конец jQuery(this).trigger('blur');
|
небольшой самоанализ. Неумение правильно и точно сформулировать вопрос. В сущности надо было так: "Как написать функцию для определения метода (опции) title ?"
|
| Часовой пояс GMT +3, время: 03:53. |