javascript - 如何自定义Opentip默认样式？

Question

我正在努力使用 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>

Answer 1

首先，您需要将 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"

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

使用背景属性设置背景

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>

我添加了顶部边距，只是为了证明如果有空间，它会与配置的尖端接头一起出现。