Question

Javascript代码：

var tooltip = document.createElement('div');
var value = document.getElementsByClassName('tooltips');
var tooltip_val = document.getElementsByClassName('tooltips').item(attr).getAttribute('title');
var attr;
for (attr = 0; attr < value.length; attr ++){
    value.item(attr).getAttribute('title');
    }

document.getElementsByClassName('tooltips').item('attr').onmouseover = function(){ mouseOver() };
document.getElementsByClassName('tooltips').item('attr').onmouseout = function(){ mouseOut() };

function mouseOver(){
    document.body.appendChild(tooltip);
    tooltip.setAttribute('class', 'tooltip');
    tooltip.innerHTML = tooltip_val;
    document.getElementsByClassName('tooltips').item('attr').removeAttribute('title');
    }

function mouseOut(){
    document.body.removeChild(tooltip);
    document.getElementsByClassName('tooltips').item('attr').setAttribute('title', tooltip_val);
    }

我希望此工具提示代码能够处理此HTML代码：

<a href="" title="Hello1" class="tooltips">show tooltip</a>
<a href="" title="Hello2" class="tooltips">show tooltip1</a>
<a href="" title="Hello3" class="tooltips">show tooltip2</a>

我该怎么做？

Answer 1

修改

我在您的代码中进行了一些更改，现在可以正常工作 - 但您仍需要定位工具提示

var tooltip = document.createElement('div');
var objs = document.getElementsByClassName('tooltips');
for(var i = 0; i < objs.length ; i++){
   objs[i].onmouseover = mouseOver;
   objs[i].onmouseout = mouseOut;
};  

function mouseOver(e){
   document.body.appendChild(tooltip);
   tooltip.setAttribute('class', 'tooltip');
   var tooltip_val = e.target.getAttribute('title');
   tooltip.innerHTML = tooltip_val;
   e.target.removeAttribute('title');
}

function mouseOut(e){
   var tooltip_val = tooltip.innerHTML;
   document.body.removeChild(tooltip);
   e.target.setAttribute('title', tooltip_val);
}

Answer 2

希望它可以帮助

  $(".tooltip").mouseleave(function () {
        $("#tooltip").html("");
    });
    $(".tooltip").mouseover(function () {
        var tooltip_msg = $(this).attr("title");
        $("#tooltip").html(tooltip_msg);
    });

Answer 3

var elements = document.getElementsByClassName('tooltip');
    for (var i = 0; i < elements.length; i++) {
        elements[i].onmouseout = function () { mouseOut() };
        elements[i].onmouseover = function () { mouseOver(this) };
    }
    function mouseOut() {
        document.getElementById("tooltip").innerHTML = "";
    }
    function mouseOver(obj) {
        console.log(obj);
        document.getElementById("tooltip").innerHTML = obj.title;
    }

Answer 4

这是一个使用OODK-JS和本机DOM API实现可重用，可扩展的Tooltip组件的解决方案

      <html>
      <head>
        <style>
        .tooltip{
          position:absolute;
          top: 0;
          left: 0;
          border: 1px solid black;
          padding: 5px;
          background: black;
          color: white;
          margin-top: 5px;
        }

        .tooltip2{
          position:absolute;
          top: 0;
          left: 0;
          border: 1px solid red;
          padding: 5px;
          background: red;
          color: white;
          margin-top: 5px;
        }
        </style>

        <script src="../src/oodk.js"></script>

        <script>

        OODK.config({
            'path': {
              'oodk': '../src',
              'workspace': 'workspace'
            }
        });

        OODK(function($, _){

          // Tooltip component 
          // display a tooltip on elements matching
          // the given className
          $.class(function Tooltip($, µ, _){

            // the tooltip element
            $.protected('el');

            // the className to apply tooltip on
            $.protected('prtEl');

            $.protected('cls');

            $.protected('attrs');

            $.public(function __initialize(prtEl, cls, attrs){

              µ.el = document.createElement('div');

              Object.keys(attrs).forEach(function(name){
                µ.el.setAttribute(name, attrs[name]);
              });

              µ.prtEl = prtEl;

              µ.cls = cls;

              µ.attrs = attrs;

            });

            // bind all elements matching the cls property 
            $.public(function bind(){

              var tooltips = µ.prtEl.getElementsByClassName(µ.cls);

              var self = this;

              //define listeners here to avoid polluting the global namespace
              function mouseenter(evt){
                self.show(evt.target);
              }

              function mouseleave(evt){
                self.hide();
              }

              Object.keys(tooltips).forEach(function(value, index){

                var el  = tooltips[index];

                //unbind listeners in case of reinitialization 
                el.removeEventListener('mouseenter', mouseenter);
                el.removeEventListener('mouseleave', mouseleave);

                // move the title attribute to data
                el.dataset.title = el.title;
                el.removeAttribute('title');

                // bind listeners
                el.addEventListener('mouseenter', mouseenter);
                el.addEventListener('mouseleave', mouseleave);
              });
            });

            $.public(function show(el){

              document.body.appendChild(µ.el);

              µ.el.innerHTML = el.dataset.title;

              µ.moveBottomLeft(el);

            });

            $.protected(function moveBottomLeft(el){

              var position = el.getBoundingClientRect();

              µ.el.style.top = (position.top + (position.bottom - position.top) + 'px');

              µ.el.style.left = (position.left + 'px');
            });

            $.public(function hide(){
              document.body.removeChild(µ.el);
            }); 
          });

          window.onload = function(){

            var tooltip1 = $.new(_.Tooltip, document.getElementById('tooltipable-1'), 'tooltips', {'class': "tooltip"});

            tooltip1.bind();

            document.getElementById('bindTooltip2').addEventListener('click', function(evt){

              var tooltip2 = $.new(_.Tooltip, document.getElementById('tooltipable-2'), 'tooltips2', {'class': "tooltip2"});

              tooltip2.bind();
            });

          }

        });
        </script>
      </head>
      <body>

        <h4>Tooltip 1</h4>

      <p id="tooltipable-1">
         <a href="" title="Hello1" class="tooltips">show tooltip</a>
         <a href="" title="Hello2" class="tooltips">show tooltip1</a>
         <a href="" title="Hello3" class="tooltips">show tooltip2</a>
      </p>

      <h4>Tooltip 2</h4>

      <p id="tooltipable-2">
         <a href="" title="Hello4" class="tooltips2">show tooltip</a>
         <a href="" title="Hello5" class="tooltips2">show tooltip1</a>
         <a href="" title="Hello6" class="tooltips2">show tooltip2</a>
      </p>

      <h4>No Tooltip</h4>

      <p>
         <a href="" title="Hello7" class="tooltips">show tooltip</a>
         <a href="" title="Hello8" class="tooltips">show tooltip1</a>
         <a href="" title="Hello9" class="tooltips">show tooltip2</a>
      </p>

      <p>
         <button id="bindTooltip2">Bind tooltip 2</button>
      </p>

      </body>
      </html>

通过javascript制作的工具提示无法正常工作

4 个答案: