Menu item tooltip

[YaniManParticipant]

Hi!
Can i somehow put tooltips on the items of the submenus of a horizontal menu?
Something like this:

<div id="menu">
  <ul>
    <li>A
      <ul>
        <li data-tooltip="This is A1">A1</li>
        <li data-tooltip="This is A2">A2</li>
        <li data-tooltip="This is A3">A3</li>
      </ul>
    </li>
    <li>B</li>
  </ul>
</div>

<script>
$(document).ready(function()
{
  $("#menu").jqxMenu();
  $("#menu").find("[data-tooltip]").each(function()
  {
    $(this).jqxTooltip({ content: $(this).attr("data-tooltip") });
  });
});
</script>

This won’t work because the DOM is changed while creating the menu. Also tried to “append” the tooltips before menu creation, but that fails too. Could you please suggest a solution?

[YaniManParticipant]

I managed to do it in the shown event, but like this:

$("#menu").on("shown", function()
{
  $("[data-tooltip]").each(...)
});

Which is not a good idea, because it iterates through the whole DOM. Could you please point me to a pre-selector i could use? $(this) does not work (i think maybe because the created submenu element is not children of the horizontal menu but of a popup). Would be a good idea to pass the popup DOM element as an argument to the sown popup.

[DimitarParticipant]

Hello YaniMan,

Please try the approach presented in the following example: https://www.jseditor.io/?key=menu-item-tooltip.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[YaniManParticipant]

Hello Dimitar,

Much to learn i still have. Thanks.

Best regards,
YaniMan

[Author]

Posts