how to use value of a data element as a selector jquery

Question

Is there a way to use a data element's value as a selector.
I want to use the "#login" in the data-select attr to select the span in the ff code:

<div class="pop" data-select="#login" data-toggle="popover" title="What is it?" data-content="Amazing content."  data-placement="left">Help!</div>
<span id="login">okay</span>

I have tried this (using bootstrap js):

<script>
  $('.pop').popover({selector: '[data-popover]'});
</script>

Thank you...

Answer 1

I finally created a working workaround!!!
I figured that a button could be used to trigger the popover on the element that you actually want the popover to appear on.
Let me show you what I mean:

JS >>
<script> $('.pop').popover({delay: { show: 200, hide: 100 }}); var cont = $(".pop-sel")[0].dataset.select; $('body').on('click', '.pop-sel', function(e) { $(cont).popover('toggle'); }); $(cont).popover({trigger: 'manual', delay: { show: 200, hide: 100 }}); </script>

HTML >>
<span class="badge pop-sel" id="loginSel" data-toggle="popover" data-select="#login">?</span>
<input type="text" class="form-control" id="login" name="login" maxlength="10" value="" data-title="What is xIdentity?" data-content="And here's some amazing content. It's very engaging. right?" data-placement="right" data-selector="loginSel" required>

This therefore makes the badge to trigger the input's popover.
Thanks to guest271314 response, it gave me the idea!
If you created a fiddle, pls comment it's location for others.
If I have spare time I might add a fiddle.
You guys are great!

Answer 2

$($(".pop")[0].dataset.select)

jsfiddle http://jsfiddle.net/guest271314/aGTKW/

Answer 3

Refer this SO Answer

Always search in SO before asking question ;)

@Bass Jobsen has given an excellent solution for that:

The data-elements are not used caused they are set on initialization instead of on show of the element. This won't work for a selector which only use the same options for all set in your initializator.

Quick fix extend your show function and set the options (again) there:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script>    

var tmp = $.fn.popover.Constructor.prototype.show
$.fn.popover.Constructor.prototype.show = function () {
  var $e = this.$element
  if (typeof($e.attr('data-html')) != 'undefined')this.options.html = ($e.attr('data-html')==='true') 
  if (typeof($e.attr('data-placement')) != 'undefined')this.options.placement = $e.attr('data-placement');
  /* add other options here */
  tmp.call(this);
}

Answer 4

I'm not 100% sure what you're asking but I think this might help you.

dataSelect = $this.data('select');

This will get the content of the data-tag for you, then you can use the content in the "dataSelect" variable to select the span.

If this isn't what you're looking for, maybe you could setup a JS fiddle or be more specific with your question.

Answer 5

Try using {selector: '[data-toggle="popover"]'}