preface

ToolTip effects are a common effect used in web design. When the user hovers over a control, the ToolTip displays and displays a ToolTip. When the mouse goes away, the ToolTip hides. Usually we use ToolTip to display a single sentence or a few words, but we can display a lot of information. Today’s focus is on making tooltips in a variety of styles with Hightopo’s HT for Web product.

Home address: www.hightopo.com/index.html

implementation

HT has eight view components with configurable ToolTip functionality, , respectively, Ht.graph.graphview, HT.graph3d.graph3dView, HT.Widget.listView, HT.Widget.propertyView, HT.Widget.tableView, hT.Widget.treevi Ew, HT.Widget. TreeTableView, hT.Widget. Toolbar.

Ht. Data is the most basic Data type of HT. Users can store service information in Data object attributes. Currently, subclasses such as Node, Edge, and Column are provided to apply to different view components.

Displays basic text information

Set up a view component (ht.graph.graphview as an example, the rest of the components are basically the same), enableToolTip by calling the component’s enableToolTip() method, and then create a test node. And calls its setToolTip() method to set what its ToolTip displays. This allows me to achieve the effect shown above, where the ToolTip appears when I move my mouse over the icon. The specific implementation code is as follows:

var dataModel = new ht.DataModel(); Var graphView = new hT.graph.graphView (dataModel); dataModel.setBackground('black'); // enableToolTip graphview.enabletooltip (); var node = new ht.Node(); node.setPosition(600, 150); node.setImage('symbols/ht.json'); // Set the content of ToolTip node.setTooltip ('HT for Web');                         
dataModel.add(node);

graphView.addToDOM();Copy the code

I want to talk about a few extra points in this section

  • When using the HT default ToolTip format, content set by setToolTip() will be displayed as a single line no matter how long the content is, and the “\n” newline and “\r” carriage return characters will not work.
  • When using the HT default ToolTip format, if ToolTip is turned on but the target is not set accordingly, ToolTip will not be displayed.
  • EnableToolTip () is enabled and diableToolTip() is off. In the figure above, I use the buttons in the upper right corner to enable and disable ToolTip. Note that ToolTip is disabled by default.
  • Node can use the getToolTip() method to view the contents of the currently set ToolTip.
  • There are six ToolTip configuration parameters in the HT. Default object. If you want to change these configuration parameters, you need to specify the global htconfig variable name. Since the HT system only reads the htconfig configuration information during initialization, Therefore, htconfig must be initialized before the hT.js package is introduced. Modifying the htconfig variable while running does not work.
<script> htconfig = {Default: {// The component's ToolTip displays the delay interval toolTipDelay: // The ToolTip component displays the case if the mouse moves to a new location, ToolTip continues to follow toolTipContinual in real time:true, // The background color of ToolTip toolTipBackground:'yellow', // Text color toolTipLabelColor:'# 000'ToolTipLabelFont:'12px arial, sans-serif', // The shadow color of the ToolTip'rgba (0,0,0,0.35)'}}; </script> <script src="js/ht.js"></script>     Copy the code

Displays custom content

In addition to the default text information, HT also provides the ability to customize tooltips, and most view components also have a getToolTip() method that can be overloaded to return custom ToolTip text. In the example below, hT.graph. GraphView continues to be used on the left side, hT.Widget.propertyView is used on the top of the right side, and HT.Widget.Formpane is used on the bottom.

Let’s take a look at the left side, and since most components are used similarly on ToolTip, let’s use GraphView as an example. As you can see from the figure, the content of the ToolTip is reduced to two lines, but as mentioned in the previous section, using the HT default format does not allow line wrapping. GetToolTip () will pass in an interactive event parameter and use getDataAt() to get the data that generated the interactive event. Then we can set it up according to the data. Example code is as follows:

getColor = function(value) {
    if (value < 40)
        return '#00A406';
    if (value < 70)
        return '#FFCC00';
    return '#A60000';
};

graphView.getToolTip = function(e){
    var data = graphView.getDataAt(e);
    if(data){
        var cpu = data.a('cpu'),
            mem = data.a('mem'),
            html = '
       

         '
       
 + 
                'CPU:     ' 
                + '<span style="color:' + getColor(cpu)+ '" >' + cpu + '%</span>'
                + '<br>' +
                'MEM:    ' 
                + '<span style="color:' + getColor(mem)+ '" >' + mem + '%</span>'
                + '</div>';        return{html: html}; }};Copy the code

As you can see from the code above, this example uses innerHTML to add a custom HTML effect to the tooltip div to show the contents of the current data binding. Given that only one data is set in the graphView, Therefore, there is no more strict judgment on data in overloaded methods. As long as data exists, it will be presented. In formal project development, there may be multiple data requiring different custom formats. In this case, we can determine which data is obtained by getDataAt(), so as to set different data; You can also continue using setToolTip() and then call getToolTip() on the data retrieved by getDataAt() to process the value.

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){
            return isValue ? data.a('cpu') + The '%' : 'CPU usage percentage';
        }
    },
    {
        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){
            return isValue ? data.a('mem') + The '%' : 'Memory usage percentage'; }}]);Copy the code

The above code is part of the propertyView configuration code in the upper right. The HT.Widget. propertyView is a little different from the other seven components in that each of its children, HT.Property, can be set to a different custom content using the getToolTip method. Due to its specificity, getToolTip takes three arguments: Data represents the currently selected data object in the dataModel, which is also the data object currently displayed by the propertyView; IsValue indicates whether the current mouse position is within the range of the right attribute value. If the value is false, it indicates that the mouse position is within the range of the left attribute name. PropertyView represents the property component in which the property is currently located.

Use Popover plugin for HT UI

UI library is a powerful interface component library. It is based on the excellent framework of HT core package and the advanced Canvas mechanism of HTML5. It is easy to use, high performance, easy to expand, rich components, cross-platform and so on. The Popover container hT.ui. Popover is similar to ToolTip in that it displays hints around the host component. The HT-ui.js file needs to be imported.

Use Popover plugin in HT UI.

In this example, three Button components in the UI are added and three different popovers are set up.

  • HtmlView can wrap any HTML content, such as HTML text and DOM objects.
  • The second example on the right wraps the HT core package component HT.graph3d.graph3DView with HT.ui.htView.
  • The last example shows the Echarts diagram. The UI library provides custom components for displaying Echarts. Buttons in the image above can also be customized, but we won’t go into details.
// htmlView
var button = new ht.ui.Button();
button.setText('hover me');

var htmlView = new ht.ui.HtmlView();
htmlView.setContent('<iframe border="0" style="width: 400px; height: 300px; margin: 0; padding: 0; border: 0;" src="http://www.hightopo.com"></iframe>');

var popover = new ht.ui.Popover();
popover.setContentView(htmlView);
button.setPopover(popover1, 'hover');

button.addToDOM(window, { x: 70, y: 20, width: 80, height: 24 });Copy the code

I’ve only posted the complete code for the first one here as an example. First we define a Button object as the host component, then define an htmlView and call its setContent method to wrap the content to display, and finally add it to the popover and set it to the button. You can also change hover to click if you want to display it.

Use Popover plugin in HT

Popover is also available in HT, so I’ll use graphView as an example.

Add two nodes to the graphView and set two popovers with the same content for them. Unlike in the UI, popovers are not configured by the host calling setPopover. Instead, popovers are cached in the node private variable _popover, which is hidden and displayed by controlling the popovers’ hide() and show() functions.

function getScreenRect(graphView, node) {
    var tx = graphView.tx(),
        ty = graphView.ty(),
        zoom = graphView.getZoom(),
        pos = node.getPosition(),
        width = node.getWidth() * zoom,
        height = node.getHeight() * zoom;

    return {
        x: tx + pos.x * zoom - width / 2,
        y: ty + pos.y * zoom - height / 2,
        width: width,
        height: height
    }
}

function init() {
    graphView = new ht.graph.GraphView();
    dataModel = graphView.dm();

    node1 = new ht.Node();
    node1.setPosition(200, 100);
    node1.setName('Device1');
    node1._popover = createPopover('top');
    dataModel.add(node1);

    graphView.getView().addEventListener('mousemove'.function (e) {
        var oldHoverNode = graphView._hoverNode;
        var newNode = graphView.getDataAt(e);
        if(oldHoverNode ! == newNode) {if (oldHoverNode) {
                oldHoverNode._popover.hide();
            }
            if(newNode && newNode._popover) { var newPopover = newNode._popover; var rect = getScreenRect(graphView, newNode); newPopover.setMaster(rect); newNode._popover.show(); } graphView._hoverNode = newNode; }}); graphView.addToDOM(); }Copy the code

The root div of the topology component can be obtained by getView(), which listens for mouse movement events. When the mouse moves to a new node, its Popover will be displayed. Meanwhile, the Popover of the original node will be hidden, and then private variables will be added to the graphView to record. In the event listener, Popover calls the setMaster() method and passes in the rectangular range of the current node, because Popover needs to position the display based on the host’s rectangular range.

conclusion

ToolTip is most often used to display the name of an image or a logo. But in addition to providing the basic functionality of ToolTip, HT also gives you the ability to expand and display a chart as well as a 3D interface. There may be other things you want to show. If you are interested, please click the link at the top of this article to see what else HT can do and contact us.