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.

Try this link...http://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-on-html5 — DoctorMick, Mar 04 '14 at 16:44
The question is: what is the function to display the tooltip so it would be triggered only if the data-custom-tooltip is NOT empty ?? — JanvierDesigns, Mar 04 '14 at 16:48

score 3 · Accepted Answer · edited May 23 '17 at 11:52

3

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=""]')

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

edited May 23 '17 at 11:52

Community

answered Mar 04 '14 at 16:49

epascarello

`$('[data-custom-tooltip!=""]')` seems more logical...? – VisioN Mar 04 '14 at 16:51
@VisioN it will also select the element without data-custom-tooltip attribute. – Anoop Joshi P Mar 04 '14 at 16:54
1

@VisioN yes, with a little modification. – epascarello Mar 04 '14 at 17:00

score 1 · Answer 2 · answered Mar 04 '14 at 16:48

1

use like this

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

answered Mar 04 '14 at 16:48

Anoop Joshi P

For some reason using it with `live()` doesn't seem to work, but with `on()` it does. – JanvierDesigns Mar 04 '14 at 17:31
1

live has been deprecated since 1.7 and removed in 1.9! What old version of jQuery are you using. – epascarello Mar 04 '14 at 18:00

score 0 · Answer 3 · answered Mar 04 '14 at 16:45

0

Try

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

answered Mar 04 '14 at 16:45

3 Answers3