问号加tips 。手动设置样式

 <div  class="hand-title">
                        <div class="u116  yearu16">
                            <p class="hand-p">起始年份</p>
                            <div class="yearPosition"><span>？</span>
                            
                                <div class="tooltip-content">
                                        这里是关于时间的tips 。   这里是关于时间的tips 。   这里是关于时间的tips 。   这里是关于时间的tips 。   这里是关于时间的tips 。   这里是关于时间的tips 。   这里是关于时间的tips 。
                                </div>
                            </div>
                          
                        </div>
                    </div>

移入问号。 显示tips

.yearu16 {
    position: relative;
    display: flex;
}




.yearPosition {
    position: relative;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    margin-top: 4px;
    margin-left: 24px;
    cursor: pointer;
}

.tooltip-content {
    width: 400px;
    display: none;
    position: absolute;
    font-size: 14px;
    line-height: 20px;
    background-color: #3c5360;
    border: 1px solid #3c5360;
    top: 29px;
    z-index: 3;
    left: 50%;
    margin-left: -200px;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.tooltip-content::before {
    content: '';
    position: absolute;
    top: -10px; /* 位于提示框上方 */
    left: 50%; /* 位于提示框中间 */
    margin-left: -10px; /* 使其居中 */
    border-width: 0 10px 10px 10px; /* 三角形的大小和形状 */
    border-style: solid;
    border-color: transparent transparent #3c5360 transparent; /* 三角形的颜色 */
}
.yearu16:hover .tooltip-content {
    display: block;
    
}

上面的问号。手动写的 。有问题 。 有的? 问号不能居中展示

改为这种形式

<i class="fa fa-question-circle text-ellipsis" data-toggle="tooltip" data-placement="bottom" style="display:inline-block;font-size:20px;color:#000;vertical-align:text-bottom" title="这是我的tips内容"></i> 


样式css

fa-question-circle:before {
 content: "\f059";
}
.text-ellipsis {
 white-space: nowrap;
 overflow: hidden;
text-overflow: ellipsis;
}

.fa {
font: normal normal normal   14px FontAwesome;
  text-rendering: auto;
 -webkit-font-smoothing: antialiased;
}

或者我之前的父级是定位了的 。用的那个也可以

  <div class="yearPosition">
                                <i class="fa fa-question-circle text-ellipsis" style="display:inline-block;font-size:20px;color:#000;vertical-align:text-bottom"></i>
                                <div class="tooltip-content">
                                        指从哪年的历史数据开始交接，历史数据包括不限于：合同、订单、应收款、预付充值单、结算单、开票/退票、回款/退款
                                </div>
                            </div>
                            
                            css样式
                            .yearPosition {
   position: relative;
    margin-left: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.yearPosition  .wenhao {
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 20px; 
}
.tooltip-content {
    width: 400px;
    display: none;
    position: absolute;
    font-size: 14px;
    line-height: 20px;
    background-color: #3c5360;
    border: 1px solid #3c5360;
    top: 34px;
    z-index: 3;
    left: 50%;
    margin-left: -200px;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.tooltip-content::before {
    content: '';
    position: absolute;
    top: -10px; /* 位于提示框上方 */
    left: 50%; /* 位于提示框中间 */
    margin-left: -10px; /* 使其居中 */
    border-width: 0 10px 10px 10px; /* 三角形的大小和形状 */
    border-style: solid;
    border-color: transparent transparent #3c5360 transparent; /* 三角形的颜色 */
}
.yearu16:hover .tooltip-content {
    display: block;
    
}