Атрибуты данных Bootstrap с плагином Bootstrap Tour

Я новичок в Bootstrap, и я начал использовать плагин под названием Bootstrap Tour. http://bootstraptour.com/

Я только начал изучать атрибуты данных сегодня, и мне интересно, могу ли я / должен использовать их с Bootstrap Tour. Bootstrap tour - это набор включенных плагинов для всплывающих окон и всплывающих подсказок.

Например, у туров есть шаги, а у шагов есть атрибуты, которые можно установить при запуске тура. Я пытаюсь установить расположение, заголовок и контент из элемента HTML.

var tour = new Tour();

tour.addSteps([
  {
    element: ".completed-range",
    title: "",
    content: ""
  },
  {
    element: ".fph-row h1",
    placement: 100,
    title: "Welcome to the <b>" + sectionTitle +"</b> tour!" ,
    content: "Proceed to discover this section's features."
  }

]);

Приведенный выше код создает тур с 2 шагами. Первый шаг нацелен на элемент с классом "complete-range". Из моего HTML-кода я бы хотел установить размещение, заголовок и контент, который отображается во всплывающей подсказке / подсказке к шагу. Как это:

<div class="completed-range" data-placement="top" data-title="Setting Title" data-content="My Content">

Div выше заполняет контент, как я хотел бы, но размещение и заголовок не работают. Если я использую data-toggle="popover" или data-toggle="tooltip", биты и кусочки работают так, как я хочу, но не все для плагина Tour. Может кто-то указать мне верное направление?

1 ответ

Ну, почти сразу после того, как я написал вопрос, я нашел половину ответа. Так,

 {
    element: ".completed-range",
    title: "Logout",
    placement: $(".completed-range").data("placement"), 
    content: ""
  },

Я могу ввести конструктор, как я сделал с атрибутом размещения. Затем,

<div class="completed-range" data-placement="top" data-content="testing content" data-original-title="Title from HTML">

будет читать мое значение "размещения". Мне понравилось, что оба варианта - когда я указывал data-content="каким бы ни был мой контент" в моем HTML, значение data-content переопределяло то, что было в моем конструкторе. Мне это понравилось. Хм, да ладно.

GitHub Convo, где я читал о введении конструктора

Другие вопросы по тегам