<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery鼠标悬停文字提示插件 - 网页模板</title>
<link rel="stylesheet" href="jquery.mytooltip.css">
<link rel="stylesheet" href="demo/style.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.mytooltip.js"></script>
<script src="demo/script.js"></script>
</head>
<body>
<div class="content" id="start-example">
<div class="content-block content-first">
<div class="content-block-inner">
<h2 class="content-title">Directions</h2>
<h3 class="content-subtitle">Directions tooltips</h3>
<div class="js-mytooltip type-inline-block style-block style-block-one"
data-mytooltip-custom-class="align-center"
data-mytooltip-template="网页模板">Top
</div>
<br>
<code>data-mytooltip-direction=<span class="code-string">"top"</span></code> or
<code>direction:<span class="code-string">'top'</span></code>
<span class="code-info">- This default value</span>
<br>
<br>
<div class="js-mytooltip type-inline-block style-block style-block-one"
data-mytooltip-custom-class="align-center"
data-mytooltip-direction="right"
data-mytooltip-template=".tooltip-content-dom">Right
</div>
<br>
<code>data-mytooltip-direction=<span class="code-string">"right"</span></code> or
<code>direction:<span class="code-string">'right'</span></code>
<br>
<br>
<div class="js-mytooltip type-inline-block style-block style-block-one"
data-mytooltip-custom-class="align-center"
data-mytooltip-direction="left"
data-mytooltip-template="Direction left">Left
</div>
<br>
<code>data-mytooltip-direction=<span class="code-string">"left"</span></code> or
<code>direction:<span class="code-string">'left'</span></code>
<br>
<br>
<div class="js-mytooltip type-inline-block style-block style-block-one"
data-mytooltip-custom-class="align-center"
data-mytooltip-direction="bottom"
data-mytooltip-template="Direction bottom">Bottom
</div>
<br>
<code>data-mytooltip-direction=<span class="code-string">"bottom"</span></code> or
<code>direction:<span class="code-string">'bottom'</span></code>
<br>
<br>
</div>
</div>
<div class="content-block content-second">
<div class="content-block-inner">
<h2 class="content-title">Offset</h2>
<h3 class="content-subtitle">Оffset tooltips</h3>
<div class="js-mytooltip type-inline-block style-block style-block-two"
data-mytooltip-custom-class="align-center"
data-mytooltip-template="Offset default - 10px">Default
</div>
<br>
<code>data-mytooltip-offset=<span class="code-number">10</span></code> or
<code>offset:<span class="code-number">10</span></code>
<span class="code-info">- This default value</span>
<br>
<br>
<div class="js-mytooltip type-inline-block style-block style-block-two"
data-mytooltip-custom-class="align-center"
data-mytooltip-offset="20"
data-mytooltip-direction="left"
data-mytooltip-template="Offset 20px">Offset custom
</div>
<br>
<code>data-mytooltip-offset=<span class="code-number">20</span></code> or
<code>offset:<span class="code-number">20</span></code>
<br>
<br>
</div>
</div>
<div class="content-block content-first">
<div class="content-block-inner">
<h2 class="content-title">Templates</h2>
<h3 class="content-subtitle">Plain text or great HTML template</h3>
<div class="js-mytooltip type-inline-block style-block style-block-three"
data-mytooltip-custom-class="align-center"
data-mytooltip-direction="right"
data-mytooltip-template="<strong>plain text</strong>">hover to me
</div>
<br>
<code>data-mytooltip-template<span class="code-string">"<strong>plain text</strong>"</span></code> or
<code>template:<span class="code-string">'plain text'</span></code> <br>
or add selector a string <code style="margin-top: 10px;"><span class="code-string">'.content-class'</span></code>
<br>
<br>
<p><strong>Hover link: "Mars"</strong></p>
<p>The chemicals allow the water to remain liquid at lower
temperatures but also help keep it
from boiling off in the
thin atmosphere of <a class="js-mytooltip-template" data-mytooltip-direction="right" href="#">Mars</a>,<br> the
researchers said.</p>
<div class="js-mytooltip type-inline-block style-block style-block-three"
data-mytooltip-custom-class="align-center"
data-mytooltip-direction="right"
data-mytooltip-dinamic-template="true"
data-mytooltip-template="<div class='wrap'><a class='add-to-basket' href='#'>Add to basket</a><span class='count'>17</span></div>">dinamic template
</div>
<br>
<code>data-mytooltip-dinamic-template=<span class="code-boolean">true</span></code> or
<code>dinamicTemplate:<span class="code-boolean">true</span></code>
<br>
<br>
</div>
</div>
<div class="content-block content-second">
<div class="content-block-inner">
<h2 class="content-title">Animation</h2>
<h3 class="content-subtitle">Animation options</h3>
<div class="js-mytooltip type-inline-block style-block style-block-four"
data-mytooltip-custom-class="align-center"
data-mytooltip-template="Slow animate duration - 200mc">Animate duration default
</div>
<br>
<code>data-mytooltip-animate-duration=<span class="code-number">200</span></code> or
<code>animateDuration:<span class="code-number">200</span></code>
<span class="code-info">- This default value</span>
<br>
<br>
<div class="js-mytooltip type-inline-block style-block style-block-four"
data-mytooltip-animate-duration="100"
data-mytooltip-custom-class="align-center"
data-mytooltip-direction="left"
data-mytooltip-template="Slow animate duration - 100mc">Fast animate duration
</div>
<br>
<code>data-mytooltip-animate-duration=<span class="code-number">100</span></code> or
<code>animateDuration:<span class="code-number">100</span></code>
<br>
<br>
<div class="js-mytooltip type-inline-block style-block style-block-four"
data-mytooltip-animate-duration="400"
data-mytooltip-custom-class="align-center"
data-mytooltip-template="Slow animate duration - 400mc">Slow animate duration
</div>
<br>
<code>data-mytooltip-animate-duration=<span class="code-number">400</span></code> or
<code>animateDuration:<span class="code-number">400</span></code>
<br>
<br>
<div class="js-mytooltip type-inline-block style-block style-block-four"
data-mytooltip-custom-class="align-center"
data-mytooltip-direction="left"
data-mytooltip-template="Animate offset 15px">Animate offset default
</div>
<br>
<code>data-mytooltip-animate-offset-px=<span class="code-number">15</span></code> or
<code>animateOffsetPx:<span class="code-number">15</span></code>
<span class="code-info">- This default value</span>
<br>
<br>
<div class="js-mytooltip type-inline-block style-block style-block-four"
data-mytooltip-custom-class="align-center"
data-mytooltip-direction="right"
data-mytooltip-animate-offset-px="40"
data-mytooltip-template="Animate offset 40px">Animate offset custom
</div>
<br>
jQuery鼠标悬停文字提示插件.zip
版权申诉
61 浏览量
2022-11-22
17:15:23
上传
评论
收藏 59KB ZIP 举报
jQuery鼠标悬停文字提示插件.zip （7个子文件） 
jQuery鼠标悬停文字提示插件 jiaoben3782 
jquery.mytooltip.js 16KB jquery-1.11.3.min.js 94KB jquery.mytooltip.css 3KB
index.html 23KB demo style.css 4KB script.js 2KB
jQuery鼠标悬停文字提示插件.jpg 29KB资源评论
