将工具提示添加到div

最新推荐文章于 2023-06-07 19:04:41 发布

w36680130

最新推荐文章于 2023-06-07 19:04:41 发布

阅读量169

点赞数

文章标签： javascript html css tooltip

原文链接：https://oldbug.net/q/TrTV/Add-a-tooltip-to-a-div

版权

本文翻译自：Add a tooltip to a div

I have a div tag like this: 我有这样的div标签：

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

How can I displaying a tooltip on :hover of the div, preferably with a fade in/out effect. 如何在div的:hover上显示工具提示，最好具有淡入/淡出效果。

#1楼

参考：https://stackoom.com/question/TrTV/将工具提示添加到div

#2楼

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <script>
  $(function() {
    $("#tooltip").tooltip();
  });
  </script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>

You can also customise tooltip style. 您还可以自定义工具提示样式。 Please refer this link: http://jqueryui.com/tooltip/#custom-style 请参考此链接： http : //jqueryui.com/tooltip/#custom-style

#3楼

You can create custom CSS tooltips using a data attribute, pseudo elements and content: attr() eg. 您可以使用数据属性，伪元素和content: attr()创建自定义CSS工具提示content: attr()例如。

http://jsfiddle.net/clintioo/gLeydk0k/11/ http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

. 。

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid orange;
    border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#4楼

You can toggle a child div during onmouseover and onmouseout like this: 您可以在onmouseover和onmouseout期间切换子div，如下所示：

function Tooltip(el, text) {
  el.onmouseover = function() {
    el.innerHTML += '<div class="tooltip">' + text + '</div>' 
    }
  el.onmouseout = function() {
    el.removeChild(el.querySelector(".tooltip"))
  }
}

//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")

Example in Stack Snippets & jsFiddle 堆栈片段和jsFiddle中的示例

 function Tooltip(el, text) { el.onmouseover = function() { el.innerHTML += '<div class="tooltip">' + text + '</div>' } el.onmouseout = function() { el.removeChild(el.querySelector(".tooltip")) } } //Sample Usage Tooltip(document.getElementById("mydiv"), "I'm a tooltip")

 #mydiv { position: relative; display: flex; align-items: center; justify-content: center; width: 120px; height: 50px; padding: 5px 10px; background-color: #e2f7ff; box-shadow: 1px 1px 1px 0px #cecece; } .tooltip { position: absolute; display: inline-block; white-space: nowrap; width: auto; height: auto; background-color: #11121b; color: white; padding: 4px 6px; border-radius: 3px; z-index: 99; left: 100%; top: 0; }

 <div id="mydiv"> This is just a div </div>

#5楼

The simplest way would be to set position: relative on the containing element and position: absolute on the tooltip element inside the container to make it float relative to the parent (containing element). 最简单的方法是在容器内的工具提示元素上设置position: relative和在容器内的tooltip元素上position: absolute ，以使其相对于父对象（包含元素）浮动。 For example: 例如：

<div style="background: yellow;">
    <div style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />

        <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
            Tooltip text
        </div>
    </div>
</div>

#6楼

A CSS3-only solution could be: 仅CSS3的解决方案可以是：

CSS3: CSS3：

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

HTML5: HTML5：

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

You could then create a tooltip-2 div the same way... you can of course also use the title attribute instead of data attribute. 然后，您可以用相同的方式创建一个tooltip-2 div ...当然，您也可以使用title属性代替data属性。