Bootstrap3のtooltipの挙動が1回目と2回目で異なる

Bootstrap3を使っています。

.clipという要素をクリックしたら、
クリップボードにコピーして、ツールチップを出して２秒後にツールチップを消す処理を書いたのですが、

１回目は正しく動作するのですが、ページをリロードせず、そのまま２回目クリックすると、
ツールチップが一瞬表示されるだけで、1回目のように2秒間表示してくれません。

どこらへんがわるいのでしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="utf-8">
5		<meta http-equiv="X-UA-Compatible" content="IE=edge">
6		<meta name="viewport" content="width=device-width, initial-scale=1">
7		<title>test</title>
8		<link href="css/bootstrap.min.css" rel="stylesheet">
9		<!--[if lt IE 9]>
10			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
11			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
12		<![endif]-->
13	</head>
14	<body>
15
16		<button class="btn btn-primary btn-sm hidden-print clip"
17						data-clipboard-text="{!params.permanentLink}">
18				<span class="glyphicon glyphicon-link" aria-hidden="true"></span>&nbsp;リンクコピー
19		</button>
20
21		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
22		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
23		<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
24		<script>
25        $(function () {
26            // クリップボードにコピー
27            new Clipboard('.clip')
28                    .on('success', function (e) {
29                        setTooltip('パーマネントリンクをコピーしました!');
30                        hideTooltip();
31                    })
32                    .on('error', function (e) {
33                        setTooltip('Failed!');
34                        hideTooltip();
35                    });
36
37            $('.clip').tooltip({
38                trigger: 'click',
39                placement: 'bottom'
40            });
41
42            function setTooltip(message) {
43                $('.clip').tooltip('hide')
44                        .attr('data-original-title', message)
45                        .tooltip('show');
46            }
47
48						function hideTooltip() {
49                setTimeout(function () {
50                    $('button.clip').tooltip('hide');
51                }, 1000);
52            }
53					});
54		</script>
55	</body>
56</html>

行動規範の内容に同意します

回答1件

ベストアンサー

あ、解決しました・・：
以下のようにすれば大丈夫でした。。

js
1            function setTooltip(message) {
2                $('.clip').attr('data-original-title', message)
3                        .tooltip('show');
4            }