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"

将提示关节设置为工具提示的左侧中心。您应该有足够（以及更多）的空间来容纳工具提示 - 因此，如果您的目标位于视口的顶部并且您执行“左中”提示关节，它可能会自动变为“左上”，因为没有足够的空间。

您使用背景属性设置背景

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 回答