SOURCE

const htmlFn = (data) => {



    let tooltipElem = document.createElement('div');

    const htmlStrCopy = `
    <div style="
    padding: 10px 16px 13px 14px; 
    background: linear-gradient(269deg, #024562 6%, #01293F 95%);
    box-sizing: border-box;
    padding: 10px 16px 13px 14px;
    box-shadow: 0px 0px 8px 4px rgba(106, 86, 176, 0.14);
    border: 1px solid rgb(70, 220, 254);
    font-size:14px;
    line-height: 18px;
    color: #FFFFFF;
    ">
    ${
        data[0].title
            ? `<div 
        class="d3-tooltip-title"
        style= "font-weight: 550;
        margin-bottom: 5px;
        display: flex; 
        align-items: center; "
        >
      ${
            data[0].titleColor ?
                `<span class="titleIcon"
        style="width: 8px; 
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
        display: inline-block;
        background:${data[0].titleColor}">
        </span>`: ''
            }
        ${data[0].title}</div>`
            : ''
        }
      ${data
            .map((item) => {
                return `<div 
          class="d3-tooltip-item-blk" 
          style="display: flex; 
          align-items: center; 
          ">
          ${
                    item.itemColor ?
                        `<span class="icon"
          style="width: 8px; 
          height: 8px;
          border-radius: 50%;
          margin-right: 5px;
          background:${item.itemColor}">
          </span>`: ''
                    }
          <span>${item.name}： &nbsp; </span>
          <span>${(+item.value).toLocaleString()}</span>
          <span>${item.unit || ''}</span>
      </div>`;
            })
            .join('')}
    </div>
      <hr/>`;

    tooltipElem.innerHTML = htmlStrCopy
    document.body.appendChild(tooltipElem);
}

const dataList = [
    {
        title: '数据测试',
        // titleColor: 'pink',
        itemColor: 'red',
        name: '福睿斯',
        value: '665485',
        unit: '个'
    },
    {
        title: '数据测试',
        // titleColor: 'bule',
        itemColor: '#666',
        name: '案干饭',
        value: '2345',
        unit: '局'
    }
]



const dataList2 = [
    {

        name: '单挑数据',
        value: '665485',
        unit: '个'
    },
    
]

const dataList3 = [
    {
        title: '数据测试',
        // titleColor: 'pink',
        // itemColor: 'red',
        name: '福睿斯',
        value: '665485',
        unit: '个'
    },
    {
        title: '数据测试',
        // titleColor: 'bule',
        // itemColor: '#666',
        name: '案干饭',
        value: '2345',
        unit: '局'
    }
]

const dataList4 = [
    {
        title: '数据测试',
        titleColor: 'pink',
        // itemColor: 'red',
        name: '福睿斯',
        value: '665485',
        unit: '个'
    },
    {
        title: '数据测试',
        titleColor: 'bule',
        // itemColor: '#666',
        name: '案干饭',
        value: '2345',
        unit: '局'
    }
]
htmlFn(dataList)
htmlFn(dataList2)
htmlFn(dataList3)
htmlFn(dataList4)



const data = '哈大技术规范书福睿斯客户输入法头发'
const val = data.slice(0,5)[0]
console.log(1,data)
console.log(2,data)

<!-- <div style="
    padding: 10px 16px 13px 14px; 
    background: linear-gradient(269deg, #024562 6%, #01293F 95%);
    color:'#fff';
    box-sizing: border-box;
    padding: 10px 16px 13px 14px;
    box-shadow: 0px 0px 8px 4px rgba(106, 86, 176, 0.14);
    border: 1px solid rgb(70, 220, 254);
    font-size:14px;
    line-height: 18px;
    color: #FFFFFF;
">
	<div class="d3-tooltip-title" style="
          font-weight: 550;
    "> 测试数据</div>

	<div class="d3-tooltip-item-blk" style="
         display: flex; 
         align-items: center; 
         ">
		<span class="icon" 
        style="width: 8px; 
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
        background: pink"> </span>
		<span>道具：</span>
        <span> 89,157</span>
        <span>个</span>
      </div> 

      	<div class="d3-tooltip-item-blk"
         style="
         display: flex; 
         align-items: center; 
         ">
		<span class="icon" 
        style="width: 8px; 
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
        background: red"></span>
		<span>测试：</span>
        <span> 231,545</span>
        <span>个</span>
      </div> 
    </div>
    <hr>
    1
<div style="
    padding: 10px 16px 13px 14px; 
    background: linear-gradient(269deg, #024562 6%, #01293F 95%);
    color:'#fff';
    box-sizing: border-box;
    padding: 10px 16px 13px 14px;
    box-shadow: 0px 0px 8px 4px rgba(106, 86, 176, 0.14);
    border: 1px solid rgb(70, 220, 254);
    font-size:14px;
    line-height: 18px;
    color: #FFFFFF;
">

	<div class="d3-tooltip-title"
        style="
        font-weight: 550;
        margin-bottom: 5px;
        display: flex; 
        align-items: center; 
    "> 
     <span class="icon"
        style="width: 8px; 
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
        background: pink"></span>
      标题
      </div>
	<div class="d3-tooltip-item-blk" style="
         display: flex; 
         align-items: center; 
         ">
		
		<span>护具：</span>
        <span> 45454545</span>
        <span>个</span>
      </div> 
    </div>   
  
    <hr/>
    2

  <div style="
        padding: 10px 16px 13px 14px; 
        background: linear-gradient(269deg, #024562 6%, #01293F 95%);
        color:'#fff';
        box-sizing: border-box;
        padding: 10px 16px 13px 14px;
        box-shadow: 0px 0px 8px 4px rgba(106, 86, 176, 0.14);
        border: 1px solid rgb(70, 220, 254);
        font-size:14px;
        line-height: 18px;
        color: #FFFFFF;
    ">
	<div class="d3-tooltip-title" style="
          font-weight: 550;
    "> 数据2</div>
	<div class="d3-tooltip-item-blk" style="
         display: flex; 
         align-items: center; 
         ">
		<span>护具：</span>
        <span> 45454545</span>
        <span>个</span>
      </div> 
    </div>
     <hr/>
    3

    <div style="
    padding: 10px 16px 13px 14px; 
    background: linear-gradient(269deg, #024562 6%, #01293F 95%);
    color:'#fff';
    box-sizing: border-box;
    padding: 10px 16px 13px 14px;
    box-shadow: 0px 0px 8px 4px rgba(106, 86, 176, 0.14);
    border: 1px solid rgb(70, 220, 254);
    font-size:14px;
    line-height: 18px;
    color: #FFFFFF;
">
	<div class="d3-tooltip-item-blk" style="
         display: flex; 
         align-items: center; 
         ">
		<span>护具：</span>
        <span> 45454545</span>
        <span>个</span>
      </div> 
    </div>
     <hr/> -->