Nano Hash - криптовалюты, майнинг, программирование

Обновить элемент, чтобы отображалась его новая всплывающая подсказка (в jQuery/Javascript)

У меня есть элемент html, который использует всплывающую подсказку начальной загрузки, чтобы показать заголовок при наведении на него курсора. Однако, когда вы щелкаете этот элемент, я меняю всплывающую подсказку, но новая всплывающая подсказка не отображается, пока я не уберу с нее мышь и снова не наведу указатель мыши на элемент.

Я хочу, чтобы всплывающая подсказка отображалась мгновенно при нажатии указанной кнопки. Как я могу этого добиться? Есть ли способ «обновить», за неимением лучших слов, элемент html?

javascript jquery twitter-bootstrap twitter-bootstrap-tooltip
27.02.2014

  • Это поможет, если вы опубликуете код 27.02.2014
  • Событие im not sure of any 'Refresh' events in bootstrap, but a work around would be to internally call the mouseover` в конце обратного вызова события клика. 27.02.2014

Ответы:


1

попробуй так

Демонстрация:

http://jsfiddle.net/dreamweiver/9z404crn/

$(document).ready(function() {
  $('#example').tooltip();
  $('#example').on('click', function() {
    $(this).attr('data-original-title', 'changed tooltip');
    $('#example').tooltip();
    $(this).mouseover();
  });
});
h3 {
  margin-top: 50px;
}
<h3>
  Sensors Permissions
  <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

Примечание.

Приведенная выше логика работает только с версией Bootstrap 2.3.2 и ниже, однако решение предоставлено @NabiK .A.Z будут работать с последними версиями Bootstrap lib.

Удачного программирования :)

27.02.2014
  • Идеально, именно то, что я хотел. Итак, mouseover() — это то, чего мне не хватало. Спасибо! 27.02.2014
  • Не работает с Bootstrap 3.3.0+. Вы можете попробовать здесь: jsfiddle.net/ NabiKAZ/GRyAN/404 Я предлагаю использовать это решение: stackoverflow.com/a/33699472/1407491 13.11.2015
  • @NabiK.A.Z.: интересно, похоже, произошли серьезные изменения в способе реализации всплывающей подсказки в версии бутстрапа 3.3.0+, поскольку это был хак, а не реальное решение из бутстрапа, они никогда не удосужились поддерживать ту же логику в новой версии. бутстрапа (т.е. с 3.0+). в любом случае хорошо это знать. 14.11.2015

    • 2

    Вы можете использовать этот код:

    var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);

    Я тестирую его с бутстрапом 3.3.4

    Вы можете увидеть это здесь:

    http://jsfiddle.net/NabiKAZ/a4WwQ/1029/

    $('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
});

$('.mytooltip').hover(function() {
  $('.mytooltip').tooltip('show');
});

$('.mytooltip').click(function() {
  var newTooltip = 'Changed this tooltip!';
  $(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});
    .cart {
  overflow: hidden;
  padding: 10px 3px;
  background: yellow;
}
    <div class="cart">
  <a data-toggle="tooltip" title="add to cart" class="mytooltip">
    <i class="icon-shopping-cart"></i>
  </a>
</div>

<br>

<div>
  <a data-toggle="tooltip" title="add to another cart" class="mytooltip">
    <i class="icon-shopping-cart"></i>
  </a>
</div>


<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
  About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/>  Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
  <div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

    13.11.2015

    3

    Для меня в bootstrap 4 это сработало:

    $("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()
    21.03.2021

    4

    Конечно, вам просто нужно изменить текст всплывающих подсказок в событии onclick.

    $('.tooltip-inner').html("This is a test");

    Я создал для вас jsfiddle в качестве демонстрации http://jsfiddle.net/a4WwQ/59/

    В настоящее время он изменит все видимые тексты всплывающих подсказок, что на самом деле не проблема, поскольку вы не собираетесь показывать более одного за раз. При этом вам следует подумать об изменении кода, чтобы он указывал на ближайшую всплывающую подсказку.

    Надеюсь, поможет!

    27.02.2014
  • Как вы сказали, если на странице есть две всплывающие подсказки, ваше решение не сработало. Я думаю, что это решение лучше: stackoverflow.com/a/33699472/1407491 13.11.2015
  • Согласен - я обновил ваш jsfiddle, так как все всплывающие подсказки показывались при наведении курсора на него. jsfiddle.net/a4WwQ/1031 18.11.2015

    • 5

    если вы хотите обновить содержимое;

    $('#example').tooltipster('content', 'i am superman!');
    21.02.2020
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..