Настройка 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 Для него надо переписать код. Щас буду пробовать по аналогии, не знаю получится ли...
|
Часовой пояс GMT +3, время: 03:48. |