如何使用工具提示中的内容扩展 div 的宽度？答案

【问题标题】：How can I make the width of my div expand with it's content within a tooltip?如何使用工具提示中的内容扩展 div 的宽度？
【发布时间】：2016-07-26 01:34:27
【问题描述】：

我有功能性的工具提示，我想根据它的内容做出响应。根据检查员的说法，它继承了 75px 的宽度（我不知道从哪里开始），然后所有内容都换行到下一行。我注意到如果我将定位更改为相对，所有文本都将排在一行，但是我需要保持它的定位绝对以使其显示在 svg 上方。我怎样才能做到这一点？

我已经尝试过“display: inline-block”并使用“float”。两者都不起作用。

<div class="tooltip-wrapper">
   <div class='tooltip'>
        {{content}}
    </div>

    <svg>
        <use xlink:href={{icon}}>
    </svg>
</div>

.tooltip-wrapper {
    position: relative;
    cursor: pointer;

    svg {
        height: 0.75rem;
        width: 0.75rem;
    }

    &:hover {
        .tooltip {
            opacity: 1;
        }
    }
}

.tooltip {
    position: absolute;
    bottom: calc(100% + 1rem);
    background-color: rgba($black, 0.7);
    border-radius: 2px;
    color: $white;
    padding: 0.5rem;
    opacity: 0;
    transition: opacity $transition-timing ease;

    &:before {
        content: '';
        position: absolute;
        bottom: -0.3rem;
        left: 50%;
        margin-left: -0.3rem;
        @include triangle(0.7rem, rgba($black, 0.7), down);
    }
}

controller: ($element, $scope) ->
    $scope.content = "Content stuff and stuff"
    $scope.icon = "#icon-history"

link: (scope, element, attrs, ctrl) ->
    @tooltipWrapper = element[0].children[0]
    @tooltipIcon = @tooltipWrapper.children[1]
    @tooltipContent = @tooltipWrapper.children[0]

    console.log @tooltipWrapper

    element.on 'mouseenter', =>
        @_dropdown()

    @_dropdown = (offset) =>
        Lcontent = @tooltipContent.innerHTML
        Lsplit = Lcontent.split(' ')
        leng = 0

        for i of Lsplit
            leng += Lsplit[i].length
        # console.log leng

        if leng > 10
            $(tooltipContent).css('width', @tooltipContent.width)
        console.log @tooltipContent.width //this returns undefined

        @left = -(@tooltipContent.offsetWidth - @tooltipIcon.offsetWidth) / 2
        $(tooltipContent).css('left', @left)

【问题讨论】：

除非你有 Sass->CSS 编译错误，只提供编译后的 CSS（以及重现问题的必要标记）。这些与 Angular、CoffeeScript 或 SVG 有什么关系？
这是在 Angular 中完成的，所以我编写函数和构建代码的方式可能不是“Angular”方式。它是用 CoffeeScript 编写的，以防你没有注意到。 SVG，可能没有必要。
不要使用标签，除非它们确实与问题相关。

标签： angularjs svg coffeescript sass tooltip

【解决方案1】：

这就是我所缺少的。

'空白：nowrap;'在我的“工具提示”类中。然后，我在我的 '@_dropdown 函数中添加了下面的代码，这样如果我有大量内容，它最终会出现在多行。

if leng > 50
    $(tooltipContent).css({"width": '360px', 'white-space': 'initial'})

【讨论】：