CODEWITHSUNDEEP
jbox
MBaas
MBaas

Reputation: 7530

How to use content that's stored in other elements?

I am trying to create multiple jBoxes using the data-attributes and I want to feed them with content from other elements.

I assumed this wouldn't be possible (out of the box), so I used a data-jbox-content-from attribute which is supposed to be point to the element with the content. But I'm confused now: I know that I should be creating a single jBox only - but I do not see how that is doable when on the other hand I need distinct calls per element to provide the content?

And to confirm my uncertainty...the fiddle isn't working. So I hope someone will find a way to do this either my fixing bugs in my "ugly" approach (eaching over the controls) or a smarter use of JS/jBox.

$("[data-jbox-content-from]").each(function() {
  new jBox("Tooltip", {
    theme: "TooltipDark",
    id: "jBoxTooltip_" + $(this).attr("id"),
    getTitle: "data-jbox-title",
    content: $($(this).attr("data-jbox-content-from")),
    attach: "#" + $(this).attr("id")
  }).attach();
});

Complete fiddle here

Upvotes: 0

Views: 305

Answers (1)

Stephan Wagner
Stephan Wagner

Reputation: 990

You approach is correct. But you need to put your code into domready:

$(document).ready(function () {
  $("[data-jbox-content-from]").each(function() {
    new jBox("Tooltip", {
      theme: "TooltipDark",
      id: "jBoxTooltip_" + $(this).attr("id"),
      getTitle: "data-jbox-title",
      content: $($(this).attr("data-jbox-content-from")),
      attach: "#" + $(this).attr("id")
    });
  });
});

Also notice that I removed the .attach() method after new jBox. jBox does that when it initializes.

See updated fiddle: https://jsfiddle.net/StephanWagner/kqgxcda1/1/

Upvotes: 1

Related Questions