Повторная инициализация всплывающей подсказки HTML Twitter Bootstrap (динамический заголовок всплывающей подсказки)

Я новичок в Bootstrap и jquery, и у меня с этим большая проблема, и я не нашел ответа на нее.

Случай: у меня есть текст, в котором также есть всплывающая подсказка и всплывающее окно. С помощью всплывающего окна я показываю поле ввода и кнопку. После нажатия кнопки «заголовок всплывающей подсказки» меняется на введенное значение. Это работает. Но... я не могу уничтожить и повторно инициализировать всплывающую подсказку, поэтому она не показывает новый заголовок.

Код:

$('.note').each(
  function() {
    $(this).popover({
      placement: 'auto',
      html: true,
      content: returnNoteInput($(this), $(this).attr("tooltip-title"), $(this).attr("input")),
      title: "Jegyzet módosítása"
    })
    $(this).tooltip({
      placement: 'bottom',
      title: $(this).attr("tooltip-title")
    })
  });

function returnNoteInput(inputValue, inputTarget) {
  eredmeny = "<input type=\"text\" value=\"" + inputValue + "\"></input>";
  eredmeny += "<button onclick=\"setValue(this, '" + inputTarget + "')\")>módosítás</button>"
  return eredmeny;
}

function setValue(ele, targetId) {
  document.getElementById(targetId).value = ele.previousElementSibling.value;
  noteElement = document.getElementById(targetId).nextElementSibling;

  noteElement.setAttribute("tooltip-title", ele.previousElementSibling.value);
}

Итак, все работает (я вижу, как меняется заголовок всплывающей подсказки), за исключением того, что я не могу повторно инициализировать всплывающую подсказку (я не скопировал свои попытки, потому что это не удалось).

Редактировать: Примечание. У меня есть другое поле ввода, просто чтобы посмотреть, работает оно или нет.

Спасибо за каждую помощь!


javascript twitter-bootstrap twitter-bootstrap-tooltip
person Andor    schedule 30.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение:

function setValue(ele, targetId){
    document.getElementById(targetId).value=ele.previousElementSibling.value;
    noteElement= $('#'+targetId).next();
    noteElement.attr("tooltip-title",ele.previousElementSibling.value);
    noteElement.tooltip("destroy");
    noteElement.popover("destroy");

    setTimeout(function() {
        noteElement.tooltip({placement : 'bottom',title : noteElement.attr("tooltip-title")})
        noteElement.popover({placement : 'auto',html:true,content: returnNoteInput(noteElement.attr("tooltip-title"),noteElement.attr("input")), title :"Jegyzet módosítása"})
        }
            ,1000)
    }
person Andor    schedule 30.07.2018