Использование события onmouseover кнопки для вызова функции, которая генерирует qtip - PullRequest
Новая
       45

Использование события onmouseover кнопки для вызова функции, которая генерирует qtip

0 голосов
/ 07 ноября 2019

У меня есть многострочная html-таблица, в каждой строке есть кнопка в столбце, и при наведении курсора на кнопку мне бы хотелось, чтобы она генерировала qtip, вызывая одну функцию, а не генерировала скрипт для каждой кнопки. row.

В каждой строке таблицы я, очевидно, могу сгенерировать скрипт qtip и привязать его к каждой кнопке, но это приводит к многократному повторению кода. Я надеялся использовать onmouseover для кнопки, чтобы вызвать функцию, передав ей элемент button, и использовать ее для генерации qtip.

Вот чего я хотел бы достичь: 

<table>
  <tr><td><button id="btn1" type="button" onmouseover="showActions(this)">Show Actions</button></td></tr>
  <tr><td><button id="btn2" type="button" onmouseover="showActions(this)">Show Actions</button></td></tr>
</table>

<script>
function showActions(el) {
  el.qtip({
    content: { text: "Things & Stuff" },
    style: { classes:'qtip-bootstrap qtip-rounded qtip-shadow' },
    position: {
      adjust: { method: 'shift none' },
      my: 'top-left',
      at: 'right-center',
      target: el,
      viewport: $jQuery(window)
    }
  });
}
</script>

Как я уже сказал, я могу просто добавить скрипт в каждую строку и использовать jQuery, чтобы связать его с идентификатором кнопки этой строки (и удалить атрибут onmouseover), и это работает, но это слишком много скрипта на странице и кажетсянеэффективно.

В настоящее время с вышеизложенным я не получаю подсказку, когда наводю курсор на кнопку. Причина, по которой я так хочу, заключается в том, что я добавлю некоторые функциональные возможности для динамического изменения содержимого qtip (посредством вызова ajax) в зависимости от того, какая кнопка находится над кнопкой мыши. Я уверен, что это что-то простое, что я скучаю, но по жизни я не могу понять это.

...