9

機能が気に入ったので、最近、ツールチップ用の新しいプラグインを使用してみました。ただし、問題が発生しました。新しい行を追加する方法がわからないため、ツールチップがページ全体に表示されません。エスケープ文字など、ここで読んだ解決策のいくつかを試しましたが、機能しません。

$(document).ready(function () {		
	$('.tooltip-custom').tooltipster({
		theme: 'tooltipster-noir'
	});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/themes/tooltipster-noir.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.js"></script>

<a href="#" class="tooltip-custom" title="This is my very long run on tooltip that just doesnt seem to want to end or split lines. Ok maybe I am overreacting but still. I want to be able to start a new line whenever I please!"><h1>Hello!</h1></a>

4

2 に答える 2

22

contentAsHTML:True、ツールチップのコンテンツが文字列として提供される場合、デフォルトでプレーン テキストとして表示されます。このコンテンツを実際に HTML として解釈する必要がある場合は、このオプションを true に設定します。

Insert <br> or use <div> in your title.

 $(document).ready(function () {        
$('.tooltip-custom').tooltipster({
      contentAsHTML: true,
});
});
于 2015-09-08T10:21:09.410 に答える
3

ツールチップスターのマニュアルを注意深く読んでください - http://iamceege.github.io/tooltipster/

必要なのは、適切な設定を使用することだけです。あなたの場合、maxWithを追加します

$(document).ready(function () {		
	$('.tooltip-custom').tooltipster({
		theme: 'tooltipster-noir',
        maxWidth: 500   
	});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/themes/tooltipster-noir.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.js"></script>

<a href="#" class="tooltip-custom" title="This is my very long run on tooltip that just doesnt seem to want to end or split lines. Ok maybe I am overreacting but still. I want to be able to start a new line whenever I please!"><h1>Hello!</h1></a>

于 2015-03-29T06:23:59.597 に答える