前言ToolTip效果是网页制作中常见的一种特效。当用户将鼠标悬停在某个控件上时，ToolTip会显示并显示相应的提示信息给用户；当鼠标离开时，工具提示隐藏。一般情况下，我们使用ToolTip只是显示一个句子或者几个词，但是我们也可以显示很多信息。今天的重点是通过Hightopo的HTforWeb产品制作各种风格的tooltips。首页地址：https://www.hightopo.com/index.html实现方法HT有8个可配置ToolTip功能的视图组件，分别是ht.graph.GraphView、ht.graph3d.Graph3dView、ht.widget。列表视图、ht.widget.PropertyView、ht.widget.TableView、ht.widget.TreeView、ht.widget.TreeTableView、ht.widget.Toolbar。ht.Data是HT最基本的数据类型。用户可以在Data对象属性上存储业务信息。目前提供了Node、Edge、Column等子类用于不同的视图组件。本文将统称为数据。显示基本的文本信息，首先创建一个视图组件（这里以ht.graph.GraphView为例，其余组件基本相同），调用组件的enableToolTip()即可开启ToolTip功能方法，然后创建一个测试节点，并调用它的setToolTip()方法来设置它的ToolTip要显示的内容。这样就可以实现上图中的效果了。当我的鼠标移到图标上时，将显示工具提示。具体实现代码如下：vardataModel=newht.DataModel();//创建视图组件vargraphView=newht.graph.GraphView(dataModel);dataModel.setBackground('black');//启用ToolTipgraphView.enableToolTip();varnode=newht.Node();node.setPosition(600,150);node.setImage('symbols/ht.json');//设置ToolTip内容node.setToolTip('HTforWeb');dataModel.add(node);graphView.addToDOM();在这一部分，我想补充几点。当使用HT默认的ToolTip格式时，通过setToolTip()设置的内容无论多长都会显示为一行。"\n"换行符和"\r"回车将无效。当使用HT默认的ToolTip格式时，如果打开了ToolTip，但没有相应设置target，则不会显示ToolTip。启用enableToolTip()，禁用diableToolTip()。在上图中，我通过右上角的按钮调用了这两个方法来启用和禁用ToolTip。需要注意的是，ToolTip默认是禁用的。Node可以通过getToolTip()方法查看当前设置的ToolTip内容。ht.Default对象包含六个工具提示配置参数。如果要更改这些配置，则需要指定全局htconfig变量名。由于HT系统在初始化时只读取htconfig配置信息，所以htconfig必须在导入ht.js包之前已经初始化，在running状态下修改htconfig变量将不再起作用。示例代码如下：显示自定义内容除了默认的文本信息，HT还提供了自定义ToolTip的功能。大多数视图组件还有一个getToolTip()方法，可以重载该方法以返回自定义工具提示字。在下图的例子中，左边继续使用ht.graph.GraphView，右边上半部分使用ht.widget.PropertyView，下半部分使用ht.widget.FormPane。首先，让我们来看看左边的部分。由于大部分组件在ToolTip上的使用方式都差不多，所以我们还是以GraphView作为代表。从图中我们可以看到ToolTip的内容已经变成了两行，但是在上一节中已经提到，使用HT的默认格式是无法对内容进行换行的。这是因为重载了graphView的getToolTip()，getToolTip()会传入一个交互事件事件参数，通过getDataAt()方法获取产生交互事件的数据，然后我们就可以根据数据进行相应的设置.示例代码如下：getColor=function(value){if(value<40)return'#00A406';如果（值<70）返回“#FFCC00”；返回'??#A60000';};graphView.getToolTip=function(e){vardata=graphView.getDataAt(e);if(data){varcpu=data.a('cpu'),mem=data.a('mem'),html='
'+'CPU:'+''+cpu+'%'+'
'+'MEM:'+''+mem+'%'+'
';返回{html:html};}};从上面代码可以看出，本例使用innerHTML自定义tooltip的html效果，在tooltip的div中添加显示当前data数据绑定的内容。由于graphView中只设置了一条数据，重载方法不对数据做更严格的判断，只要数据存在即可。Presentation，在正式的项目开发中，可能会有多个数据需要不同的自定义格式。在这种情况下，我们可以通过getDataAt()来判断得到的是哪些数据，从而针对不同的数据进行不同的设置；我们也可以继续使用setToolTip()，然后调用getToolTip()，对得到的值进行处理。propertyView.addProperties([{name:'name',displayName:'Name'},{displayName:'CPU',drawPropertyValue:function(g,property,value,rowIndex,x,y,w,h,data,view){drawFunc(g,data.a('cpu'),x,y,w,h);},getToolTip:function(data,isValue,propertyView){returnisValue?data.a('cpu')+'%':'CPU使用率';}},{displayName:'MEM',drawPropertyValue:function(g,property,value,rowIndex,x,y,w,h,data,view){drawFunc(g,data.a('mem'),x,y,w,h);},getToolTip:function(data,isValue,propertyView){returnisValue?data.a('mem')+'%':'内存使用百分比';}}]);以上代码是右上角propertyView的部分配置代码。ht.widget.PropertyView与其他七个组件有些不同。ht.Property的每个子元素都可以通过getToolTip方法设置不同的自定义内容。由于其特殊性，getToolTip会传入三个参数：data表示dataModel中当前选中的数据对象，也是propertyView当前显示的数据对象；isValue表示当前鼠标位置是否在右边属性的取值范围内，如果值为false，则表示在左边属性名的范围内；propertyView表示该属性当前在属性组件中。使用HTUI的Popover插件UI库是基于HT核心封装的优秀框架和先进的HTML5Canvas机制的强大界面组件库。具有易用、高性能、易扩展、组件丰富、跨平台等特点。弹出框容器ht.ui.Popover类似于ToolTip，可以围绕宿主组件显示一些提示信息。使用时需要引入ht-ui.js文件。在HTUI中使用Popover插件。本例中添加了三个UI中的Button组件，分别设置了三个不同的Popovers。第一种是通过ht.ui.HtmlView嵌套一个iframe，HtmlView可以包裹任何HTML内容，比如HTML文本和DOM对象。右边第二个例子使用ht.ui.HTView将HT核心包中的组件ht.graph3d.Graph3dView包裹起来。最后一个示例显示了来自Echarts的图表。不同于前两个使用内置UI的组件，这里我们自定义了一个ht.ui.EchartView组件来实现Echarts的展示功能。UI库提供了自定义组件的功能，比如上图中的Button，你也可以自己定义使用，这里不做赘述。//htmlViewvarbutton=newht.ui.Button();button.setText('hoverme');varhtmlView=newht.ui.HtmlView();htmlView.setContent('
');varpopover=newht.ui.Popover();popover.setContentView(htmlView);button.setPopover(popover1,'hover');按钮.addToDOM(窗口,{x:70,y:20,宽度:80,高度:24});这里我只贴出第一种的完整代码作为例子。首先我们定义一个按钮对象作为宿主组件，然后定义一个htmlView并调用它的setContent方法包裹要显示的内容，最后将其添加到popover中并设置为按钮。如果需要点击显示，也可以将hover改为点击。在HT中使用Popover插件Popover插件也可以在HT中使用。下面以graphView为例进行介绍。上图内容是在graphView中添加两个节点，并为它们设置两个内容相同的Popover。与UI中不同的是，Popover不是通过host调用setPopover来配置的，而是缓存在node的私有变量_popover上，通过控制Popover的hide()和show()实现隐藏和显示。functiongetScreenRect(graphView,node){vartx=graphView.tx(),ty=graphView.ty(),zoom=graphView.getZoom(),pos=node.getPosition(),width=node.getWidth()*zoom,height=node.getHeight()*zoom;返回{x:tx+pos.x*zoom-width/2,y:ty+pos.y*zoom-height/2,width:width,height:height}}functioninit(){graphView=newht.graph.GraphView();dataModel=graphView.dm();node1=newht.Node();node1.setPosition(200,100);node1.setName('设备1');node1._popover=createPopover('top');dataModel.add(node1);graphView.getView().addEventListener('mousemove',function(e){varoldHoverNode=graphView._hoverNode;varnewNode=graphView.getDataAt(e);if(oldHoverNode!==newNode){if(oldHoverNode){oldHoverNode._popover.hide();}if(newNode&&newNode._popover){varnewPopover=newNode._popover;varrect=getScreenRect(graphView,newNode);newPopover.setMaster(矩形);newNode._popover.show();}graphView._hoverNode=newNode;}});graphView.addToDOM();}通过getView()可以得到拓扑组件的根层div，可以为它监听鼠标移动事件。当鼠标移动到一个新的节点上时，它的Popover会显示出来，同时原节点的Popover会隐藏起来。在graphView中添加私有变量进行记录。在事件监听中，Popover调用setMaster()方法传入当前节点的矩形范围。这是因为Popover需要根据宿主的矩形范围进行定位和显示。小结ToolTip的用途主要是显示图片的名称或标志的作用。不过HT除了提供了ToolTip的基本功能外，还给出了扩展的空间，可以显示图表，也可以显示3D界面。除此之外，也许您还有其他想要展示的东西。如果您感兴趣，请点击文章开头的链接，看看HT还能做什么，然后联系我们。
