multiple semantic-ui popups with target element defined in atribute of each instance

问题

I have succesfully defined a popup for a clickable link element:

The element:

`<a href="{{URL::to('alerts')}}" data-tcs="#popup-1">Alerts Page</a>`

The script which triggers my popup (note the commented lines!)

$('[data-tcs]')
.popup({
// (default as in example provided on the S-UI, works well) 
// popup : $('#popup-1'),
// (attempt 1, doesn't work) 
// popup : $(this).data('tcs'),
// (attempt 2, doesn't work) 
    popup : $(this).attr('data-tcs'),
    on    : 'hover',
    delay: {
      show: 0,
      hide: 500
    },
    hoverable: true
});

The popup itself (irrelevant):

<div class="ui popup" id="popup-1"> 
  <h3>TANJ!</h3> 
  </div>

TO DO

Now the popup works well ONLY when the ID of target content is pointed directly, but... I am about to put about 10 more popups and I want to use the same script to trigger them. How I can point to the proper popup depending on the value of data-tcs attribute? My attempts were friutless.

Thx for all help.

The docs are here: http://semantic-ui.com/modules/popup.html#/examples

回答1:

Whenever you need to pass instance specific data to any plugin options the easiest way is to wrap the initialization in an each loop

Then the each loop will expose the instance as this.

When you are trying to use this currently it is the window not the element

$('[data-tcs]').each(function() {
  var $el = $(this);
  $el.popup({    
    popup: $el.attr('data-tcs'),
    on: 'hover',
    delay: {
      show: 0,
      hide: 500
    },
    hoverable: true
  });
});

来源：https://stackoverflow.com/questions/35097417/multiple-semantic-ui-popups-with-target-element-defined-in-atribute-of-each-inst

标签

javascript

jquery

syntax

popup

semantic-ui