jQuery keyword description plug-in cluetip usage guide_jquery

The websites we develop always have a certain purpose. For example, the corporate website is used to promote the company or display products, and the technical website is used to share one's own ideas and experiences. Now that the website has its purpose, it has its own keywords (keywords describe the main content of the website). For example, most of the keywords on the enterprise website are company names or product names, and most of the keywords on the technical website are technical terms. Whether it is a company promoting products or sharing ideas and experiences, we all want to add explanations or links to certain terms (jump to the term page), then we can use the cluetip plug-in.

1. cluetip plug-in function

Mainly used to add hints and descriptions for certain keywords, and can also display ads. The cluetip plug-in can read the content in another html file,

as

7d4405cf87860889bd069f3b2a3626c8Keywords5db79b134e9f6b82c0b36e0489ee08ed

Will read the content of ajax3.html page

There are instructions for use in the official address demo.

2.cluetip official address

https://github.com/kswedberg/jquery-cluetip

There are detailed instructions for using the plug-in at the official address

The most commonly used attributes are:

splitTitle: '|' separator between title and content

sticky: true Whether to enable forced close, true is enabled. You must click Close to close the current prompt

closeText: 'Picture or text' Closed picture or text display, such as 6b0562bf56d25452777ccbb994453b3b

closePosition: 'title' Close button position

dropShadow: false Whether to add a shadow, true means adding it, false means not adding it

positionBy: 'mouse' prompts whether the form moves according to the mouse position.

truncate: 60 truncate the length. If the length is too long, only the first 60 characters will be taken

3.How to use cluetip

1. Reference files

<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="jquery.cluetip.js"></script>

2. Define the style. You can use the official style or customize it. You need to modify the jquery.cluetip.css file when customizing. As shown in this example

body{
  font-size:12px;
  font-family:微软雅黑;
}
p{
  width:500px;
}
.split-body a{
  color:blue;
}

3. js code used

$(function(){
  $('a.javascript').cluetip({splitTitle: '|',width: '200px', showTitle: false});
  $('a.html').cluetip({
      splitTitle: '|',
      sticky: true,
      closeText: '<img src="cross.png" alt="" />',
      closePosition: 'title',
      dropShadow: false,
      positionBy: 'mouse'
      //truncate: 60
  });
  
});

4. HTML used

<a href='#' title='提示标题|提示内容' class='样式'>关键词</a>

The above is the entire content of this article, I hope you all like it.