精华内容
下载资源
问答
  • jQuery工具提示插件tooltip.js 使用教程

    千次阅读 2020-06-16 16:31:39
    插件描述:tooltip.js可以通过js或html5 data属性来实例化一个tooltip。它的特点还有: 可以自定义tooltip动画。内置暗色和亮色两种主题。可以自定义文字和阴影的颜色等属性。 tooltip.js tooltip.js是一款...

    插件描述:tooltip.js可以通过js或html5 data属性来实例化一个tooltip。它的特点还有: 可以自定义tooltip动画。内置暗色和亮色两种主题。可以自定义文字和阴影的颜色等属性。

    tooltip.js

    tooltip.js是一款HTML5 tooltips工具提示jquery插件。tooltip.js可以通过js或html5 data属性来实例化一个tooltip。它的特点还有:

    可以自定义tooltip动画。内置暗色和亮色两种主题。可以自定义文字和阴影的颜色等属性。允许动态的改变tooltip的内容。允许在没有用户交互的情况下显示tooltip。

    使用方法

    在页面中引入jquery和tooltip.js文件,以及样式文件tooltip.css。

    1

    2

    3

    <script src='js/jquery.min.js'></script>

    <script src='js/tooltip.js'></script>

    <link rel="stylesheet" href="css/tooltip.css" type="text/css" />

    通过js来初始化tooltip

    第一种使用tooltip.js插件的方法是通过js来初始化tooltip。例如:

    1

    <span id="my-element">Hover Me</span>

    1

    2

    3

    4

    5

    $(document).ready(function() {

        $('#my-element').tooltip({

            // 配置参数 

        });

    });

    通过data属性来初始化tooltip

    第二种方法是通过HTML data属性和class来初始化tooltip。例如:

    首先定义全局的tooltip属性:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    $(document).ready(function() {

        ToolTip.init({

            delay: 400,

            fadeDuration: 250,

            fontSize: '1.0em',

            theme: 'light',

            textColor: '#757575',

            shadowColor: '#000',

            fontFamily: "'Roboto-Medium', 'Roboto-Regular', Arial"

        });

    });

    然后通过data-tip属性和tip-hotspotclass来定义一个tooltip。

    1

    <button class="tip-hotspot" data-tip="This is the tooltip text">Button text here</button>

    配置参数

    使用第一种通过js来初始化tooltip的方法时,可以使用下面的配置参数:

    示例:

    1

    2

    3

    4

    5

    $(document).ready(function() {

        $('#my-element').tooltip({

            text: '这是一个tooltip'

        });

    });

    带参数的tooltip:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    $(document).ready(function() {

        $('#my-element').tooltip({

            text: '这是一个tooltip',

            fontSize: '14px',

            theme: 'light',

            fontFamily: "'Roboto-Medium', 'Roboto-Regular', Arial",

            delay: 400

        });

    });

     方法

    使用第一种通过js来初始化tooltip的方法时,可以使用下面的方法:

    setText:设置文字。

    1

    $('#my-element').tooltip('setText''This is the new tooltip text');

    autoTip:自动显示tooltip。

    1

    $('#my-element').tooltip('autoTip', {MY OPTIONS});

    自动显示tooltip的可用配置参数有:

    示例:使用setText来设置文字,然后使用autoTip来自动显示tooltip。

    1

    2

    3

    4

    5

    6

    7

    8

    $('#social-messages-button').tooltip('setText''You have 1 new message');

    $('#social-messages-button').tooltip('autoTip', {

        displayTime: 4000,

        fadeOutDuration: 5000,

        onShowCallback: function() {

            // play notification sound  

        }

    });

    下载地址: https://download.csdn.net/download/qq_21137441/12527315

    展开全文
  • js tooltip工具提示插件
  • js实现的tooltip简单小组件

    千次阅读 2016-09-08 16:53:43
    tooltip主要是根据鼠标的移动到相应的文字上面,下面出现提示小浮动层效果,主要是用jquery来实现,代码下:var $win = $(window);//默认的参数 var default_options = { element: null, //要加提示的元素,必填项...

    tooltip主要是根据鼠标的移动到相应的文字上面,下面出现提示小浮动层效果,主要是用jquery来实现,代码下:

    var $win = $(window);
    
    //默认的参数
     var default_options = {
         element: null, //要加提示的元素,必填项
         height:'auto',  //浮动层的高度
         width:'auto',
         message:null   //添加的提示信息,也可以在element的data-tip属性上加
         };
    
    tipObj= {
    
        init:function(options){
    
            this.render(options)
        },
        //创建浮动层的dom结构,并填加到body中
        createDOM:function(element){
    
            var that = this;
            that.wrapper= $('<div class="tool-tip-box"></div> ');
            $('body').append(this.wrapper);
    
            return this;
    
        },
        //初始化
        render:function(options){
    
            var that = this,
    
                //参数合并
                options = $.extend(default_options,options),
                msg = options.message !=null?options.message : options.element.data('tip');
    
            that.createDOM(options.element);
    
            that.wrapper.css({
                width: options.width,
                height:options.height
    
            }).html(msg);
    
            that.setPosition(options.element);
    
            options.element.on('mouseleave',function(e){
    
                that.wrapper.remove();
            })
    
        },
    
            //设置提示浮动层的位置,定位
        setPosition:function(element){
    
           var left = element.offset().left,
               top = element.offset().top+element.height();
    
            this.wrapper.css({
                position:'absolute',
                left:left,
                top:top
            });
    
            return this;
    
        }
    
    }
    
    //接口
    $.tip =$.Tip= function(options){
        return tipObj.init(options);
    

    html代码:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>ToolTip效果</title>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script src="tootip.js"></script>
        <style>
            body{
                font-size:14px;
                line-height:1.8;
    
                font-family:"Microsoft YaHei", "微软雅黑";
            }
    
            #demo{
                width:500px;
                margin:30px auto;
                padding: 20px 30px;
                position:relative;
                background-color:#fff;
                border-radius:10px;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
                box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
                -moz-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
                -webkit-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
            }
    
            #demo h2{
                color: #03F;
            }
    
            #demo .tooltip{
                color:#03F;
                cursor:help;
            }
    
            .tool-tip-box{
                display:block;
                background:#fff;
                line-height:1.6;
                border:1px solid #66CCFF;
                color:#333;
                padding:20px;
                font-size:12px;
                border-radius:5px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                overflow:auto;
            }
    
    
    
    
        </style>
    </head>
    
    <body>
    <div id="demo">
    
        <p>
            ToolTip效果还可以用来显示图片,例:<a class="tooltip" data-tip="当然显示一块儿带格式的内容也不在" id="">蓝枫</a>。当然显示一块儿带格式的内容也不在话下,例:
            <a class="tooltip" data-tip="蓝枫秋秋">我的资料</a></p>
    </div>
    <script>
        $(function(){
    
            $('.tooltip').on('mouseenter',function(e){
    
                var $this = $(this);
                $.tip({
                    element:$this
    
                })
    
            })
    
        })
    </script>
    </body>
    </html>
    

    tototip效果

    展开全文
  • JS实现简单的ToolTip功能

    千次阅读 2019-01-11 00:28:22
    界面中的各个控件有时候会需要ToolTip的功能,其实实现ToolTip功能十分简单,代码如下所示: function GetValueForToolTip(obj) { var tValue = obj.innerText; obj.setAttribute("title", tValue);} ...

    界面中的各个控件有时候会需要ToolTip的功能,其实实现ToolTip功能十分简单,代码如下所示:

    function GetValueForToolTip(obj) {
    var tValue = obj.innerText;
    obj.setAttribute("title", tValue);
    }

    参数obj为我们传递控件对象,例如:一个button,Table中的一个单元格等等,简单的调用一下:

    <td width="25%" οnmοuseοver='GetValueForToolTip(this)'>HaHa</td>

    用Button再调用一下:

    <button id="hahaBtn" οnmοuseοver="OnMouseOverForLastJobBtn(this);">HaHa Button</button>

    其他依次类推啦,如有更好的方法和建议,欢迎指教~~

    展开全文
  • function makeSelfTooltip(_options){ _options = $.extend(_options, { 'tooltip': { trigger: 'axis', axisPointer: { type: 'shadow' }, ...
    function makeSelfTooltip(_options){
    
        _options = $.extend(_options, {
            'tooltip': {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var res='<div><p>'+params[0].name+'</p></div>'
                    for(var i=0;i<params.length;i++){
                        res+='<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+'"></span>'+params[i].seriesName+':'+params[i].data['value']+'%</p>';
                    }
                    return res;
                },
                textStyle: {
                    fontSize: 12,
                    fontFamily: '宋体'
                }
            }
        }, true);
        return _options;
    }
    展开全文
  • 计划了好久,本来想写一个好一点的提示插件,先来看一下效果图,也就是我要作成什么样子 最终会是这样子的,看起来还是比较容易的,因为我好久没有写过javascript的了,有很多东西都记不起来了。...
  • js-css-tooltip是一款使用js和css3制作的tooltip工具提示插件。该tooltip插件显示时带css3动画特效,并且会自动根据元素所在的位置来定位工具提示的位置。
  • 这是一个vue的tooltip提示信息组件。它使用非常简便,同时它支持自定义样式,提示信息的位置,触发提示信息弹出的事件。提示出现隐藏的延迟时间等。
  • 一个有用的工具提示控件作为 AngularJs 指令 如何使用 隔离范围数据 属性名称 类型 描述 工具提示文本 单向绑定 设置工具提示的文本 工具提示类 单向绑定 设置工具提示的级联样式表 (CSS) 类 事件 活动名称 | 数据| ...
  • 轻量级前端tooltip插件

    2017-12-06 10:09:56
    压缩包包含 tippy.js & tippy.css & index.html(demo)
  • tooltip提示控件

    2019-10-01 16:33:24
    这些天忙于公司项目的改版就很少来这里发表文章了,今天趁着周末休息给大家分享一个jQuery提示控件。可用于显示加载提示、错误提示、操作提示等。 先上张预览图: 提示条样式可以自己定义,支持关闭回调和锁屏,...
  • 第一种: 效果: ... ...不需要js代码,显示的是title中的内容。...a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me 01</a> </div> 第二...
  • //在控件的Mouse_Enter事件中 ToolTip p = new ToolTip(); p.ShowAlways = true; p.SetToolTip(this.btn_close, "关闭");//p.SetToolTip(控件名称, "提示内容");  
  • Ext.js实现ToolTip提示

    2020-06-10 20:53:16
    1. 需求背景 在项目背景中,填表格时,需要对所填字段做出要点提示,要求在鼠标移入提示png... 参考资料 参考资料: 药到病除-Extjs6图片控件功能扩展,增加tip和点击事件 lipan-ExtJs4 笔记(7) Ext.tip.ToolTip 提示
  • 这是asp.net 2.0控件,内嵌jsToolTip 控件FloatPanel控件,支持单页面多实例。 这两款控件使用方法和Panel极其类似,只是增加了一些额外的功能。 (内含dll和web源码)
  • 基于 Vue 的简单 tooltip 工具
  • 各种风格的网页链接ToolTip显示控件,提供了基于ASP.NET+C#实现的服务器端动态ToolTip显示控件,也提供了纯js脚本的客户端ToolTip显示控件,该控件可以与不同的用户控件帮定。
  • 工具提示(Tooltip)插件  当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用。工具提示(Tooltip)插 件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示(Tooltip)插件做了很多改进,例如不...
  • Bootstrap 提示工具(Tooltip)插件

    千次阅读 2017-03-21 16:38:56
    一、提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。 有以下两种方式添加提示工具(tooltip): 1、通过data属性:如需添加一个提示工具(tooltip)...
  • echarts之tooltip-trigger

    千次阅读 2019-08-21 10:44:04
    tooltip : { trigger: 'item' }, 当trigger为’axis’ tooltip : { trigger: 'axis' }, 当trigger为’item’时只会显示该点的数据,为’axis’时显示该列下所有坐标轴所对应的数据。 ...
  • Tippy.js 一个轻量级的,纯JS库工具提示(tooltip)库
  • 遇到的问题之BootStrap-Tooltip动态显示

    千次阅读 2020-06-23 23:12:00
    script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">...
  • import {Tooltip, Popover} from 'element-ui'; { text:'表头名字', filed: '填充列的字段', width: '160' }, { text:'表头名字', filed: '填充列的字段', width: '160', render: (h, param) => { ...
  • Grumble.js气泡形状的提示(Tooltip)控件

    千次阅读 2015-03-21 21:59:14
    Grumble.js是一个jQuery插件可用于创建球形汽泡Tooltips。Grumble.js采用淡入/淡出的效果展示,可以设置成自动消失或一直显示直到被关闭为止。Tooltips显示的位置可灵活自动变幻,360度全方位无死角,无残留。还能...
  • Toolbar.js是一款非常实用的Tooltips样式的jQuery工具栏插件。该工具栏插件使用简单,可以和Font Awesome字体图标配合使用,并且可以制作非常酷的工具栏弹出动画效果。
  • http://jqueryui.com/tooltip/ 源码 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name=&...
  • Bootstrap 工具提示(Tooltip)插件 当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用。工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示(Tooltip)插件做了很多改进...
  • 在我翻阅了 github、stackoverflow、google 之后,我没有找到解决的办法,气急败坏的我决定使用最简单粗暴的办法 解决 直接使用 js 将这个恼人的 tooltip 隐藏掉。 包裹在 keep-alive 组件中的的组件在被切换时会...
  • grumble.js 其实是一个jQuery插件 准备 : 4个文件,其中grumble.min.css 和 bubble-sprite.png 的相对位置固定,bubble-sprite.png不用引入html,其它需要。资源:。。。 demo : <button>...
  • 使用了show-overflow-tooltip这个属性,文字超出隐藏,鼠标经过提示,但是弹出框默认位置在正上方,现在想将弹出位置改到右面,我尝试了很多方法,文档里面,有一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,447
精华内容 2,178
关键字:

tooltip控件js