jquery и bootstrap 3 (tooltip)
Использую bootstrap 3 и jquery 3.5.1
При клике на span копируется его содержимое в буфер обмена. Сейчас нужно добавить всплывающую подсказку Номер скопирован. Добавил в span data-toggle="tooltip" title="Номер скопирован" style="cursor: pointer;" И скрипт
$('[data-toggle="tooltip"]').tooltip({
trigger: 'manual'
});
Тогда подсказки появляются и постоянно видны. Тогда еще добавил
var id = $(this).attr('id');
...
$('[data-toggle="tooltip"]').tooltip('hide');
$("#" + id).tooltip('show');
Теперь если копировать номер один раз, то все нормально, при копировании старая подсказка исчезает, новая появляется. Но если копировать номер повторно, то подсказка просто появляется и сразу исчезает. Как это исправить или как сделать правильно? Спасибо |
savsoft,
$('[data-toggle="tooltip"]').tooltip({
trigger: 'click'
}).on('shown.bs.tooltip', function() {
let span = this;
window.clearTimeout(span.timer);
span.timer = window.setTimeout(_ => $(span).tooltip('hide'), 1500)
});
|
Цитата:
|
savsoft,
делайте макет, иначе непонятно что у вас не работает. |
Цитата:
|
Цитата:
Цитата:
|
копирование в буфер обмена с подсказкой
savsoft,
клик по цифрам, скопирует цифры и покажет подсказку на 1.5 секунды
<!doctype html>
<html lang="ru">
<head>
<title>Bootstrap 4 Tooltips - Пример работы с методами</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<span data-toggle="tooltip" title="Номер скопирован" style="cursor: pointer;">123</span>
<span data-toggle="tooltip" title="Номер скопирован" style="cursor: pointer;">007</span>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://itchief.ru/examples/vendors/popper.js/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
$('[data-toggle="tooltip"]').tooltip({
trigger: 'click'
}).on('shown.bs.tooltip', function () {
let span = this;
navigator.clipboard.writeText(span.textContent);
window.clearTimeout(span.timer);
span.timer = window.setTimeout(_ => $(span).tooltip('hide'), 1500)
});
</script>
</body>
</html>
|
Вот сделал пример. Для уже скопированных номеров подсказка показывается через раз.
<!DOCTYPE html>
<html>
<head>
<title>Клиенты</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th style="text-align: center;">Телефон</th>
</tr>
</thead>
<tbody>
<tr>
<td><span id="phone1" data-toggle="tooltip" title="Номер скопирован" style="cursor: pointer;">111111111111</span></td>
</tr>
<tr>
<td><span id="phone1" data-toggle="tooltip" title="Номер скопирован" style="cursor: pointer;">222222222222</span></td>
</tr>
<tr>
<td><span id="phone1" data-toggle="tooltip" title="Номер скопирован" style="cursor: pointer;">333333333333</span></td>
</tr>
<tr>
<td><span id="phone1" data-toggle="tooltip" title="Номер скопирован" style="cursor: pointer;">444444444444</span></td>
</tr>
<tr>
<td><span id="phone1" data-toggle="tooltip" title="Номер скопирован" style="cursor: pointer;">555555555555</span></td>
</tr>
</div>
</div>
<script>
$('[data-toggle="tooltip"]').tooltip({
trigger: 'click'
}).on('shown.bs.tooltip', function () {
let span = this;
navigator.clipboard.writeText(span.textContent);
window.clearTimeout(span.timer);
span.timer = window.setTimeout(_ => $(span).tooltip('hide'), 1500)
});
</script>
</body>
</html>
|
savsoft,
попробуйте так
<!DOCTYPE html>
<html>
<head>
<title>Клиенты</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th style="text-align: center;">Телефон</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="spantocopy" data-toggle="tooltip" style="cursor: pointer;">111111111111</span></td>
</tr>
<tr>
<td><span class="spantocopy" data-toggle="tooltip" style="cursor: pointer;">222222222222</span></td>
</tr>
<tr>
<td><span class="spantocopy" data-toggle="tooltip" style="cursor: pointer;">333333333333</span></td>
</tr>
<tr>
<td><span class="spantocopy" data-toggle="tooltip" style="cursor: pointer;">444444444444</span></td>
</tr>
<tr>
<td><span class="spantocopy" data-toggle="tooltip" style="cursor: pointer;">555555555555</span></td>
</tr>
</div>
</div>
<script>
jQuery('[data-toggle="tooltip"]').tooltip({
trigger: 'manual',
title: function() {
return `Номер ${this.textContent} скопирован`
}
}).on('click', function() {
let span = this;
navigator.clipboard.writeText(span.textContent);
jQuery(span).tooltip('show')
window.clearTimeout(span.timer);
span.timer = window.setTimeout(_ => jQuery(span).tooltip('hide'), 1500)
})
</script>
</body>
</html>
|
Так как копировать разные номера нужно (Номер заказа/Номер накладной/Номер телефона), то title оставил в span, а скрипт сделал такой
<script>
$('[data-toggle="tooltip"]').tooltip({
trigger: 'manual'
}).on('click', function() {
let span = this;
navigator.clipboard.writeText(span.textContent);
$(span).tooltip('show')
window.clearTimeout(span.timer);
span.timer = window.setTimeout(_ => $(span).tooltip('hide'), 1000)
})
</script>
Вроде работает, только не понятно, почему странно работал первоначальный вариант. |
| Часовой пояс GMT +3, время: 12:20. |