如何修改bootstrap 4.5 tooltip css?
How to modify bootstrap 4.5 tooltip css?
使用 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;
}
我想要如何:
- 更改内部(蓝色)块的宽度以填充宽度+填充
- 设置内部块与外部块的填充相等
- 要将内部块内的文本左对齐?
修改块:
这实际上是 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') !!} ' + eventInfo.adLocationsCount + ' 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 中调试元素,因为当鼠标悬停时工具提示被隐藏...
谢谢!
要更改宽度,只需使用:max-width: 400px;
。要左对齐文本,只需简单地使用 text-align: left;
将您的整个 CSS 替换为以下内容:
.tooltip-inner {
text-align: left;
max-width: 400px;
border-radius: 8px;
padding: 20px;
}
使用 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;
}
我想要如何:
- 更改内部(蓝色)块的宽度以填充宽度+填充
- 设置内部块与外部块的填充相等
- 要将内部块内的文本左对齐?
修改块: 这实际上是 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') !!} ' + eventInfo.adLocationsCount + ' 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 中调试元素,因为当鼠标悬停时工具提示被隐藏...
谢谢!
要更改宽度,只需使用:max-width: 400px;
。要左对齐文本,只需简单地使用 text-align: left;
将您的整个 CSS 替换为以下内容:
.tooltip-inner {
text-align: left;
max-width: 400px;
border-radius: 8px;
padding: 20px;
}