向div添加工具提示

我有一个这样的div标签:

<div>
  <label>Name</label>
  <input type="text"/>
</div>

我如何显示一个工具提示:div的悬停，最好有一个淡入/淡出效果。

当前回答

下面是一个简单的工具提示实现，它可以考虑鼠标的位置以及窗口的高度和宽度:

(也可以参看这把小提琴)

2018-04-10 14:55:25

其他回答

对于基本的工具提示，您需要:

<div title="This is my tooltip">

如:

.visible { 高度:3他们; 宽度:10 em; 背景:黄色; } <div title="This is my tooltip" class="visible"></div> .

对于一个更花哨的javascript版本，你可以查看:

https://jqueryhouse.com/best-jquery-tooltip-plugins/

上面的链接提供了25个工具提示选项。

2011-08-19 04:54:43

我为它创造了一个公式。首先是html

<div class="tooltip-container">
  <button class="tooltip-tarjet">
    My Button
  </button>
  <div class="tooltip-element"> 
    This is my tooltip content right here...
  </div>
</div>

现在是它的css

.tooltip-container { 
  /* it contains the tooltip message and the one firing the tooltip
   * it has position relative since it allows for a better responsive positioning
   * of the tooltip-element */
  display: inline-block;
  position: relative;
  flex-direction: row;
}
.tooltip-tarjet:hover + .tooltip-element {
  /* this selector rule matches the tooltip-element right after
   * tooltip-tarjet at a hover action
   *  */
  display: inline-block;
  position: absolute;
  background-color: #869096;
  color: white;
  opacity: 1;
  transition: all 1s;
}
.tooltip-element { 
  /* here goes the tooltip-element styles and positioning, now your
   * tooltip element will always remain to your desired positionno matter
   * the screen size at hand 
   *  */ 
  display: none; 
  opacity: 0;
  text-align: center;
  padding: 7px;
  z-index: 10;
  width: 200px;
  left: -60px;
  bottom: 48px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
}

2021-10-22 20:20:43

不使用任何API 你也可以通过使用纯CSS和Jquery演示来做这样的事情

HTML

<div class="pointer_tooltip"> 
    Click & Drag to draw the area
</div>

CSS

.pointer_tooltip{
  width : auto;
  height : auto;
  padding : 10px;
  border-radius : 5px;
  background-color : #fff;
  position: absolute;
}

Jquery

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

    //set the actuall width
    $('.pointer_tooltip').width($('.pointer_tooltip').width());
    var position_top = event.pageY+18;
    var position_left = event.pageX-60;          
    var width=$('body').width()-$('.pointer_tooltip').width();

    //check if left not minus
    if(position_left<0){
      position_left=10;
    }else if(position_left > width){
     position_left=width-10;
    }       


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});

2015-11-30 04:25:30

您可以尝试引导工具提示。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

进一步阅读

2017-11-22 09:12:15

好了，这是你满足的所有赏金要求:

没有jQuery 即时出现直到老鼠离开这个区域才会消失淡入/淡出效果纳入最后. .简单的解决方案

下面是一个演示和我的代码链接(JSFiddle)

以下是我在这款纯JS、CSS和HTML5游戏中加入的功能:

你可以设置淡出的速度。您可以使用一个简单的变量来设置工具提示的文本。

HTML:

<div id="wrapper">
    <div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS:

#a{
    background-color:yellow;
    padding:10px;
    border:2px solid red;    
}

.tooltip{
    background:black;
    color:white;
    padding:5px;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
    border-radius:10px;
    opacity:0;
}

JavaScript:

var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
                    // seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";

var showTip = function(){    
    var tip = document.createElement("span");
    tip.className = "tooltip";
    tip.id = "tip";
    tip.innerHTML = tipMessage;
    div.appendChild(tip);
    tip.style.opacity="0"; // to start with...
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)+0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "1"){
            clearInterval(intId);
        }
    }, fadeSpeed);
};
var hideTip = function(){
    var tip = document.getElementById("tip");
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)-0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "0"){
            clearInterval(intId);
            tip.remove();
        }
    }, fadeSpeed);
    tip.remove();
};

a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);

2014-09-12 14:43:35

向div添加工具提示

推荐文章

最新文章

标签