0

私は opentip フレームワークを使用してツール ヒントの実装に取り​​組んでいます。私は Jquery と Java スクリプトに非常に慣れていないため、Opentip HTML 属性を使用して実装しましたが、ヒント ジョイントや背景色などのスタイルを変更する必要があります。

誰かが私を助けることができます...以下の私のコードを見つけてくださいありがとう

#tooltip2{padding: 13px 0px 0px 10px;margin: -1px 4px -4px -5px !important;"}
<script src="https://rawgit.com/enyo/opentip/master/downloads/opentip-jquery.js"></script>
<link href="https://rawgit.com/enyo/opentip/master/css/opentip.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option" style="width:13%;float:left;">
<label style="padding:10px 0px 0px 10px;" id="tooltip2" data-ot="This is my new tooltip" data-ot-delay="1" data-ot-hide-trigger="closeButton" data-ot-style="glass" data-ot-fixed="true"  data-ot-tipJoint="'left, middle'">Option1</label>

</div>

4

1 に答える 1

2

まず、jQuery スクリプト タグを opentip スクリプト タグの前に移動する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/enyo/opentip/master/downloads/opentip-jquery.js"></script>
<link href="https://rawgit.com/enyo/opentip/master/css/opentip.css" rel="stylesheet"/>

data-ot-tip-joint 属性を使用して先端ジョイントを設定できます (オプション名が属性になると、オプション名のすべての大文字の前にハイフンが付くことに注意してください)。値を一重引用符で囲んだり、中央だけが必要な場合はコンマや中央は実際には必要ありません

data-ot-tip-joint="left"

は、ヒント ジョイントをツールヒントの左中央に設定します。ツールチップが収まる十分な (そしてもう少し) スペースが必要です。したがって、ターゲットがビュー ポートの上部にあり、「左中央」のチップ ジョイントを実行すると、自動的に「左上」になる可能性があります。十分なスペースがありません。

background 属性を使用して背景を設定します

data-ot-background="red"

あなたは完全なHTMLであるべきです

<div class="option" style="width:13%;float:left;margin-top: 100px">
    <label style="padding:10px 0px 0px 10px;" id="tooltip2" data-ot="This is my new tooltip" data-ot-delay="1" data-ot-hide-trigger="closeButton" data-ot-style="glass" data-ot-fixed="true" data-ot-tip-joint="left" data-ot-background="red">Option1</label>
</div>

スペースがある場合に構成された先端ジョイントで表示されることを証明するために、上部マージンを追加しました。

于 2015-05-08T09:26:23.900 に答える