Question

我正在使用opentip框架实现工具提示，因为我是Jquery和Java脚本的新手，我已经使用Opentip HTML属性实现了，但需要更改其样式，如tip joint和它的背景颜色。

有人可以帮助我...在下面找到我的代码谢谢

＆＃13;

#tooltip2{padding: 13px 0px 0px 10px;margin: -1px 4px -4px -5px !important;"}

＆＃13;

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

＆＃13;

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属性设置tip连接（请注意，选项名称中的每个大写字母在成为属性时都会以连字符开头）。如果你只想要中间的话，你实际上并不需要围绕值的单引号，也不需要逗号和中间

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>

我添加了一个上边距，只是为了证明如果有空间，它将与配置的尖端连接一起出现。

如何自定义Opentip默认样式？

1 个答案: