Форум

savsoft · #1 (**permalink**) 17.03.2021, 17:00

Использую 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');

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

Как это исправить или как сделать правильно?

Спасибо

рони · #2 (**permalink**) 17.03.2021, 19:19

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 · #3 (**permalink**) 17.03.2021, 19:44

Сообщение от рони

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)
});

Попробовал, но срабатывает через раз на уже скопированном номере. То есть, если номер уже скопирован, то кликнуть нужно два раза.

рони · #4 (**permalink**) 17.03.2021, 19:55

savsoft,
делайте макет, иначе непонятно что у вас не работает.

рони · #5 (**permalink**) 17.03.2021, 19:55

Сообщение от savsoft

то кликнуть нужно два раза.

зачем нужно кликнуть?

savsoft · #6 (**permalink**) 17.03.2021, 20:02

Сообщение от рони

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)
});

Сообщение от рони

зачем нужно кликнуть?

Чтобы появилась подсказка.

рони · #7 (**permalink**) 17.03.2021, 20:13

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>

savsoft · #8 (**permalink**) 17.03.2021, 20:29

Вот сделал пример. Для уже скопированных номеров подсказка показывается через раз.

<!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>

рони · #9 (**permalink**) 17.03.2021, 20:51

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>

savsoft · #10 (**permalink**) 17.03.2021, 21:27

Так как копировать разные номера нужно (Номер заказа/Номер накладной/Номер телефона), то 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>

Вроде работает, только не понятно, почему странно работал первоначальный вариант.

Форум

Справочник

Discord чат

Курсы javascript