Запретить положение: относительное влияние на ширину ребенка - PullRequest
Новая
       25

Запретить положение: относительное влияние на ширину ребенка

0 голосов
/ 29 октября 2018

Я сделал скрипку, которая должна достаточно хорошо объяснить проблему (надеюсь): JSFiddle

Вкратце: у меня есть всплывающая подсказка JS, которая не должна принимать ширину родительского элемента, а просто использовать автоматическую ширину (пока она не достигнет максимальной ширины, а затем обернуть текст). Это работает нормально, если только родительский элемент не имеет позиции: относительный набор, а затем инструментальная подсказка наследует ширину. Я не знаю, как этого избежать.

Решение, которое будет работать, - установить минимальную ширину, но это

  • не элегантно
  • до сих пор не объясняет, почему это происходит так, как это происходит
  • выглядит глупо, когда всплывающая подсказка содержит только 1 или 2 слова

Мне нужно включить код для ссылки скрипта, но это очень обширная скрипка, и, поскольку я не могу точно определить проблему, мне просто нужно поместить что-то здесь (извините!) - так что это боюсь, фрагмент будет бесполезен 

<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"
  })
})

1 Ответ

0 голосов
/ 30 октября 2018

Может быть, я понял, что уловка, что это работает для вас. Мое решение состоит в том, чтобы создать всплывающую подсказку с внутренним диапазоном . Теперь мы можем отформатировать наш новый диапазон, поместив родительский диапазон (наш старый .tlite span) в width:400px, чтобы он работал как max-width!

Хорошо, возможно, описание запутанное, но с кодом стало очень просто. Подписывайтесь на меня! ;)

Давайте создадим наш шаблон всплывающей подсказки с внутренним диапазоном: 

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

Теперь мы можем поместить почти все CSS-подсказки в этом новом диапазоне: 

.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>
...