Как проверить подсказку JQuery UI?

Question

У меня есть функция функции подсказки JQuery UI по умолчанию на моей странице. Есть ли способ стилизовать подсказку div интерактивно с помощью Инспектора? Если бы у меня было два указателя мыши, можно было бы нависать над элементом, чтобы отображать всплывающую подсказку, а во-вторых, использовать инспектор и строить стиль. Но у меня есть только одна мышь, и как только она удаляется с элемента, всплывающая подсказка исчезает. Проверка состояния «: hover» в Inspector не помогает. всплывающая подсказка исчезает на мыши.

Я использую Chrome, но любой трюк в любом браузере.

Answer 1

Мой рабочий раствор в Firefox:
1. парить над подсказкой (подсказка показана)
2. ударил CMD-Option-K (OSX) или CTRL-Shift-K (Windows), чтобы открыть "Web-консоль"
3. Типа «отладчик "(это остановит выполнение JS, поэтому всплывающая подсказка не исчезнет)
4. Откройте вкладку« Инспектор », найдите .ui-tooltip
5. отредактируйте при необходимости. примечание: изменения в CSS будут работать немедленно, даже если выполнение JavaScript остановлено.

Answer 2

Необходимо изменить CSS таким образом, чтобы подсказка инструмента всегда была видна в отличие от наведения только в том случае, когда вы можете настроить стиль div с помощью инспектора и посмотреть, как он влияет в реальном времени.

Answer 3

Если вы открываете инструменты разработчика в новейшем Google Chrome, вы должны увидеть вкладку элементов. На элементе, который вы должны навести на вас, просто щелкните правой кнопкой мыши по нему и откройте меню «Состояние элемента элемента», чтобы выбрать опцию: hover.

Answer 4

Вы не можете изменить стиль подсказки jQuery в инспекторе браузера, потому что, как вы говорите, он удален из DOM при выводе мыши.

Однако, с помощью следующего кода, это то, что я сделал, чтобы изменить, чтобы изменить стиль:

$("#myElement").attr({ 
    title: "my tooltip text" 
}).tooltip(); 

$("#myElement").tooltip({ 
    // the .tooltip class is applied by default anyway 
    tooltipClass: "tooltip" 
}); 

1. Тип debugger; в JavaScript, перед предыдущим кодом

2. В Firefox , ударил F12, чтобы открыть Firebug (скачайте его, если у вас его нет)

3. Выберите параметр Script вкладку и нажмите Reload

4. Теперь, когда отладчик активирован, выделите $("#myElement").tooltip из 2-го блока кода (без круглые скобки), щелкните правой кнопкой мыши выделенный текст, и выберите Add Watch

5. Под вкладкой часов в правом окне, нажмите на + рядом с $("#myElement").tooltip расширить все свойства

6. Под этим расширить Constructor, затем DEFAULTS, а затем шаблон, чтобы посмотреть HTML, что подсказка сделана из

Это разоблаченная HTML-структура подсказки jQuery:

<div class="tooltip"> 
    <div class="tooltip-arrow"> ... </div> 
    <div class="tooltip-inner"> ... </div> 
</div> 

...и теперь вы можете применить CSS, что-то вроде этого:

.tooltip { 
    background-color: blue; 
    border: 2px solid black; 
    border-radius: 5px; 
} 
.tooltip-arrow { 
    /* hackery, placing the arrow where it should be: */ 
    margin-bottom: -7px; 
} 
.tooltip-inner { 
    /* hackery, making all browsers render the width correctly: */ 
    width: 300px; 
    min-width: 300px; 
    max-width: 300px; 

    /* hackery, removing some unknown applied background: */ 
    background: none; 
    background-color: none; 

    color: white; 
    text-align: center; 
} 

Все «повозка, запряженная волами» как указано выше в CSS является то, что я должен сделать, чтобы получить Bootstrap, чтобы хорошо играть с JQuery (они оба имеют tooltip, которые могут конфликтовать друг с другом - см. https://stackoverflow.com/a/19247955 для получения дополнительной информации).

Answer 5

Вот что я сделал:

jQuery(".myDiv").attr("title", 'Hello'); 
jQuery(".myDiv").tooltip({close: function(event, ui) { 
    console.log(jQuery(ui.tooltip[0]).html()); 
}}); 

И содержание консоли было:

<div class="ui-tooltip-content">Hello</div> 

Кроме того, я поставил точку останова на функцию console.log, а затем исследовали структуру страницы перед </body> конец тега, и было что-то еще:

<div id="ui-tooltip-0" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" style="position: relative; top: -463.60003662109375px; left: 1px; display: block; opacity: 1;"><div class="ui-tooltip-content">Hello</div></div> 

С помощью Inspector (проверено в Chrome) можно было изменить стиль всплывающей подсказки на лету.

Answer 6

Я нашел обходной путь, как временный инспектировать его:

просто реализовать параметры скрыть, где вы Подвод логика подсказки:

hide: { 
      effect: "slideDown", 
      delay: 20000 
     } 

Это дает вам время 20 сек инспектировать его. Если вам нужно больше времени, увеличьте атрибут «delay». Вот мой рабочий код страницы JQuery подсказками:

$(function() { 
    $(document).tooltip({ 
      tooltipClass: "jqueryTooltip", 
      content: function() { 
       return $(this).attr('title'); 
      }, 
      hide: { 
       effect: "slideDown", 
       delay: 20000 
      } 
     }); 
    }); 

После того, как вы закончите с осмотром только устранить задержку, и вы сделали.

Примечание: Я использую пользовательский класс «jqueryTooltip» для создания подсказки после проверки.

Answer 7

Я опаздываю на вечеринку, но на самом деле есть простой способ сделать это.

В консоли разработчика браузера, с помощью JQuery для целевой подсказки следующим образом:

$('.selector').tooltip('open');

В моем случае, например, у меня есть класс .grey-tooltip на моей подсказке, поэтому я называю $('.grey-tooltip').tooltip('open');. Это должно открыть всплывающие подсказки, и вы можете проверить их, как и любой другой видимый элемент.

Различные методы, которые вы можете использовать с помощью всплывающих подсказок, описаны в следующих документах: https://api.jqueryui.com/tooltip/.

Answer 8

простой способ сделать паузу JS с F8 при подсказке отображается