jQuery selectors on custom data attribute that are not empty

Question

I want to create a simple custom tooltip plugin for jQuery that for every element that has a data-custom-tooltipset . So, something like :

<a href= . . . " data-custom-tooltip="This is my tooltip Text">Hhahaha</a>

OR

<button data-custom-tooltip="This is my tooltip for the button Tex">Haha Button :) </button >

So, the function to display the tooltip would be triggered only if the data-custom-tooltip is NOT empty.

Close enough to this : jQuery selectors on custom data attributes using HTML5

Answer 1

You can use :not() selector and remove the empty ones

$('[data-custom-tooltip]:not([data-custom-tooltip=""])')

or

$('[data-custom-tooltip]').not('[data-custom-tooltip=""]')

---

or based on what @VisioN said in the comments with the Not Equal Selector

var xxx = $('[data-custom-tooltip][data-custom-tooltip!=""]');

Answer 2

use like this

$("[data-custom-tooltip]:not([data-custom-tooltip='']").click(function(){alert("clicked");});

fiddle

Answer 3

Try

.filter()

var tooltip_el = $('[data-custom-tooltip]').filter(function () {
    return $.trim($(this).data('custom-tooltip')) != '';
});