如何修改bootstrap 4.5 tooltip css？

Question

使用 bootstrap 4.5.3 我制作了工具提示，我想更改默认外观。定义了我的样式：

.tooltip {
    display: flex;
    justify-content: flex-start;
    position: absolute;
    z-index: 9999;
    background: #ddff9d;
    color: #333333;
    width: 320px;
    
    -webkit-box-shadow: 5px 5px 5px 5px white;
    box-shadow: 2px 2px 2px 2px white;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    opacity: 1 !important;

    padding: 10px;
    text-align: left;
}

.tooltip-inner {
    background-color: #00acd6 !important;
    /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
    color: #fff;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #00acd6;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #00acd6;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #00acd6;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #00acd6;
}

我有： https://prnt.sc/wlwp1v

我想要如何:

更改内部（蓝色）块的宽度以填充宽度+填充
设置内部块与外部块的填充相等
要将内部块内的文本左对齐？

修改块： 这实际上是 fullcalendar 3.9 组件，工具提示是使用 javascript 代码即时呈现的：

  eventRender: function (eventInfo, element, view) {
  let adHtml = '<b>' + eventInfo.title + "</b><br> " +
        '<u>{!! showAppIcon('expire_date') !!} Expired at : ' + eventInfo.start_formatted + '</u><br>'+
        '{!! showAppIcon('location') !!}&nbsp;' + eventInfo.adLocationsCount + '&nbsp;location(s)<br>' +
        '<small>Status : ' + eventInfo.status_label + "</small><br>" +
        '<small>' + eventInfo.description + "</small>"

    let tooltipOptions = {
        title: adHtml,
        html: true
    }

   element.tooltip(tooltipOptions)

我使用这个 bootstrhttps://bootswatch.com/solar 作为模板... 我无法在浏览器的 inspactor 中调试元素，因为当鼠标悬停时工具提示被隐藏...

谢谢！

Answer 1

要更改宽度，只需使用：max-width: 400px;。要左对齐文本，只需简单地使用 text-align: left;

将您的整个 CSS 替换为以下内容：

.tooltip-inner {
  text-align: left;
  max-width: 400px;
  border-radius: 8px;
  padding: 20px;
}

代码笔：https://codepen.io/manaskhandelwal1/pen/LYRXzro

如何修改bootstrap 4.5 tooltip css？

How to modify bootstrap 4.5 tooltip css?

css

bootstrap-4

twitter-bootstrap-tooltip