javascript - 阻止位置 :relative from influencing the width of a child

Question

我制作了一个 Fiddle 应该可以很好地解释问题(我希望): JSFiddle

简而言之:我有一个 JS 工具提示，它不应该采用其父宽度，而只是使用自动宽度(直到它达到最大宽度，然后换行文本)。这很好用，除非父元素设置了 position:relative，然后 tooltipchild 继承了宽度。我不知道如何防止这种情况发生。

一个可行的解决方案是设置一个最小宽度，但这是

• 不优雅
• 仍然没有解释为什么会这样
• 当工具提示只有 1 或 2 个词时看起来很愚蠢

我必须包含 fiddle 链接的代码，但它是一个非常广泛的 fiddle，由于我无法查明问题所在，我只需要在此处放置东西(抱歉!)- 所以恐怕这段代码用处不大

<button id="tooltip">Click me</button>

button {
  margin-left: 40%;
  width: 50px;
  position: relative; /* THE OFFENDING PROBLEM*/
}

var tooltip = document.getElementById("tooltip");
tooltip.addEventListener('mouseover', function() {
  tlite.show(tooltip, {
    text: template,
    orientation: "bottom"
  })
})

Answer 1

也许我发现我的技巧对你有用。我的解决方案是创建一个工具提示，其中包含一个internal span。现在，我们可以格式化我们的新跨度，将父跨度(我们的旧 .tlite 跨度)设置为 width:400px。它像 max-width 一样工作!

好吧，也许描述很复杂，但是有了代码就变得很简单了。跟我来! ;)

让我们创建具有内部跨度的工具提示模板:

var template = document.createElement('span');
template.innerHTML = "<span class='internal'>ncididunt This tooltip is the.</span>";

现在我们可以将几乎所有的工具提示 CSS 放在这个新的 span 中:

.tlite {
  /* here you can leave all the CSS concerning the animations and the positioning */
  position: absolute;
  z-index: 1000;
  display: block;
  visibility: hidden;
  -webkit-transition: transition .25s ease-out;
  transition: opacity .25s ease-out;
  opacity: 0;
  width: 400px; /* It's a width but it works like a max-width for internal span */
}

.tlite .internal{
  display: inline-block; /* This does the trick! Super important! */
  padding: .4rem .6rem;
  text-align: left;
  white-space: normal;
  text-decoration: none;
  pointer-events: none;
  color: white;
  border-radius: 5px;
  background: green;
}

.tlite .internal::before {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  content: ' ';
  transform: rotate(45deg);
  background: inherit;
}

.tlite-n .internal::before {
  top: -3px;
  left: 50%;
  margin-left: -5px;
}

.tlite-nw .internal::before {
  top: -3px;
  left: 10px;
}

.tlite-ne .internal::before {
  top: -3px;
  right: 10px;
}

.tlite-s .internal::before {
  bottom: -3px;
  left: 50%;
  margin-left: -5px;
}

.tlite-se .internal::before {
  right: 10px;
  bottom: -3px;
}

.tlite-sw .internal::before {
  bottom: -3px;
  left: 10px;
}

.tlite-w .internal::before {
  top: 50%;
  left: -3px;
  margin-top: -5px;
}

.tlite-e .internal::before {
  top: 50%;
  right: -3px;
  margin-top: -5px;
}

现在我们可以写下我们想要多少和我们新的<span class="internal">可以长到 400 像素!

试一试:

/* he making of a tooltip is now very convulted because I had to alter a bit to fit the Fiddle; just ignore that*/
var template = document.createElement('span');
template.innerHTML = "<span class='internal'>Only few words.</span>";

var template2 = document.createElement('span');
template2.innerHTML = "<span class='internal'>This tooltip is positioned correctly and now it can grow up to 400px.</span>";

var template3 = document.createElement('span');
template3.innerHTML = "<span class='internal'>This tooltip has the width it should have but is placed wrong.</span>";


var tooltip = document.getElementById("tooltip");
tooltip.addEventListener('mouseover', function() {
  tlite.show(tooltip, {
    text: template,
    orientation: "bottom"
  })
})

tooltip.addEventListener('mouseleave', function() {
  tlite.hide(tooltip);
})

var tabletooltip = document.getElementById("tabletooltip");
tabletooltip.addEventListener('mouseover', function() {
  tlite.show(tabletooltip, {
    text: template2,
    orientation: "bottom"
  })
})

tabletooltip.addEventListener('mouseleave', function() {
  tlite.hide(tabletooltip);
})

var tabletooltip2 = document.getElementById("tabletooltip2");
tabletooltip2.addEventListener('mouseover', function() {
  tlite.show(tabletooltip2, {
    text: template3,
    orientation: "bottom"
  })
})

tabletooltip2.addEventListener('mouseleave', function() {
  tlite.hide(tabletooltip2);
})



/*LIBRARY */
function tlite(getTooltipOpts) {
  document.addEventListener('mouseover', function(e) {

    var el = e.target;

    var opts = getTooltipOpts(el);

    if (!opts) {
      el = el.parentElement;
      opts = el && getTooltipOpts(el);
    }

    opts && tlite.show(el, opts, true);
  });
}

tlite.show = function(el, opts, isAuto) {
  opts = opts || {};

  (el.tooltip || Tooltip(el, opts)).show();

  function Tooltip(el, opts) {
    var tooltipEl;
    var showTimer;
    var text;

    el.addEventListener('mousedown', autoHide);
    el.addEventListener('mouseleave', autoHide);

    function show() {
      if (opts['text']) {
        text = opts['text'].innerHTML
      } else {
        text = ' ';
      }

      text && !showTimer && (showTimer = setTimeout(fadeIn, isAuto ? 150 : 1))
    }

    function autoHide() {
      tlite.hide(el, true);
    }

    function hide(isAutoHiding) {
      if (isAuto === isAutoHiding) {
        showTimer = clearTimeout(showTimer);
        tooltipEl && el.removeChild(tooltipEl);

        tooltipEl = undefined;
        delete el.tooltip; //experimental addition for the angular library version of the tooltip
      }
    }

    function fadeIn() {
      if (!tooltipEl) {
        tooltipEl = createTooltip(el, text, opts);
      }
    }

    return el.tooltip = {
      show: show,
      hide: hide
    };
  }

  function createTooltip(el, text, opts) {
    /*console.log('create')*/
    var tooltipEl = document.createElement('span');
    var grav = opts.grav || 'n';

    tooltipEl.className = 'tlite ' + (grav ? 'tlite-' + grav : '');

    tooltipEl.innerHTML = text;

    el.appendChild(tooltipEl);

    var arrowSize = 10;
    var top = el.offsetTop;
    var left = el.offsetLeft;

    if (tooltipEl.offsetParent === el) {
      top = left = 0;
    }
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    var tooltipHeight = tooltipEl.offsetHeight;
    var tooltipWidth = tooltipEl.offsetWidth;


    var centerEl = left + (width / 2);
    var vertGrav = grav[0];
    var horzGrav = grav[1];

    tooltipEl.style.top = (
      vertGrav === 's' ? (top - tooltipHeight - arrowSize) :
      vertGrav === 'n' ? (top + height + arrowSize) :
      (top + (height / 2) - (tooltipHeight / 2))
    ) + 'px';

    tooltipEl.style.left = (
      horzGrav === 'w' ? left :
      horzGrav === 'e' ? left + width - tooltipWidth :
      vertGrav === 'w' ? (left + width + arrowSize) :
      vertGrav === 'e' ? (left - tooltipWidth - arrowSize) :
      (centerEl - tooltipWidth / 2)
    ) + 'px';

    tooltipEl.className += ' tlite-visible';

    return tooltipEl;
  }
};

tlite.hide = function(el, isAuto) {
  el.tooltip && el.tooltip.hide(isAuto);
};

if (typeof module !== 'undefined' && module.exports) {
  module.exports = tlite;
}

button {
  margin-left: 40%;
  width: 50px;
  position: relative; /* NOW, NO PROBLEM! ;) */
}

table {
  margin-left: 30%;
}

#tabletooltip {
  position: relative;
}

/* library css */

.tlite {
  position: absolute;
  z-index: 1000;
  display: block;
  visibility: hidden;
  -webkit-transition: transition .25s ease-out;
  transition: opacity .25s ease-out;
  opacity: 0;
  width: 400px;
}

.tlite .internal{
  display: inline-block;
  padding: .4rem .6rem;
  text-align: left;
  white-space: normal;
  text-decoration: none;
  pointer-events: none;
  color: white;
  border-radius: 5px;
  background: green;
}

/*
tables need an extra class for the positioning of the tooltip
*/

.tlite-table tr td,
.tlite-table tr th {
  position: relative;
}

.tlite-visible {
  visibility: visible;
  opacity: 1;
}

.tlite .internal::before {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  content: ' ';
  transform: rotate(45deg);
  background: inherit;
}

.tlite-n .internal::before {
  top: -3px;
  left: 50%;
  margin-left: -5px;
}

.tlite-nw .internal::before {
  top: -3px;
  left: 10px;
}

.tlite-ne .internal::before {
  top: -3px;
  right: 10px;
}

.tlite-s .internal::before {
  bottom: -3px;
  left: 50%;
  margin-left: -5px;
}

.tlite-se .internal::before {
  right: 10px;
  bottom: -3px;
}

.tlite-sw .internal::before {
  bottom: -3px;
  left: 10px;
}

.tlite-w .internal::before {
  top: 50%;
  left: -3px;
  margin-top: -5px;
}

.tlite-e .internal::before {
  top: 50%;
  right: -3px;
  margin-top: -5px;
}

<h3>
Any object that has position:relative has troubles with the width of the tooltip. EX:
</h3>
<button id="tooltip">Click me</button>
<p>
Remove the position and it works as intended.
</p>

<h3>
BUT for some situations, I need position:relative, otherwise the tooltip is displayed at the wrong place. EX: 
</h3>
<table style="width:25%">
  <tr>
    <th>titel1</th>
    <th>title2</th>
  </tr>
  <tr>
    <td id="tabletooltip">tooltip with position:relative</td>
    <td id="tabletooltip2">tooltip without position:relative</td>
  </tr>
</table>