一种提示框展示的方法、系统、设备及存储介质技术方案

本发明专利技术提供的一种提示框展示的方法、系统、设备及存储介质，方法包括：当检测到鼠标指针滑过网页中目标标题时，获取目标标题的父级元素及其的边框宽度；基于父级元素的样式，获取父级元素内目标标题距父级元素的边框的第一间距及第二间距，根据边框宽度、第一间距及第二间距，得到父级元素的实际宽度；基于创建的span标签，将目标标题填充至span标签中，将填充后的span标签展示于网页中，获得目标标题的宽度；比较父级元素的实际宽度和目标标题的宽度的大小，根据比较结果，基于提示框进行目标标题的展示。该方法在已经展示完全内容时自动不再展示提示框，而在未展示完全内容时可自动展示提示框，实现了提示框的合理展示，减少了提示框展示的冗余程度。了提示框展示的冗余程度。了提示框展示的冗余程度。

【技术实现步骤摘要】
一种提示框展示的方法、系统、设备及存储介质


[0001]本专利技术涉及互联网
，特别涉及一种提示框展示的方法、系统、设备及存储介质。

技术介绍

[0002]现阶段在Web端提示框的使用是很频繁的，它可以使用在按钮或者文字情境下，当鼠标指针滑过时可以进行文字的提示或者展示出页面上仅有部分文字时的完整内容，既节约空间又能使得用户得到完整的信息，使用程度较高。
[0003]目前，现有技术中展示提示框，一种方式是通过系统默认的tooltip组件进行提示框展示；另一种方式是通过第三方插件或重设的tooltip组件进行提示框展示。
[0004]但就现有技术而言，第一种方式提示框样式不容易更改，无法根据不同场景进行不同的设计与实现，而且提示框的位置固定，有时无法达到需求；第二种方式虽然样式美观、方便调整，但不能当已经能展示全部内容时还会通过提示框进行展示，显得冗余且不合理。

技术实现思路

[0005]为解决现有技术中提示框展示冗余程度高及合理性低的技术问题，本专利技术提供了一种提示框展示的方法，在已经展示完全内容时自动不再展示提示框，而在未展示完全内容时可自动展示提示框，实现了提示框的合理展示，减少了提示框展示的冗余程度。
[0006]本专利技术提供了一种提示框展示的方法，包括如下步骤：
[0007]父级元素获取步骤，当检测到鼠标指针滑过网页中目标标题时，获取所述目标标题的父级元素及所述父级元素的边框宽度；
[0008]父级元素实际宽度计算步骤，基于所述父级元素的样式，获取所述父级元素内所述目标标题距所述父级元素的边框的第一间距及距所述父级元素的边框的第二间距，根据所述边框宽度、所述第一间距及所述第二间距，计算得到所述父级元素的实际宽度；
[0009]目标标题宽度计算步骤，基于创建的span标签，将所述目标标题填充至所述span标签中，将填充后的所述span标签展示于所述网页中，以此获得所述目标标题的宽度；
[0010]提示框展示步骤，比较所述父级元素的实际宽度和所述目标标题的宽度的大小，根据比较结果，基于提示框进行所述目标标题的展示。
[0011]上述的提示框展示的方法，其中，所述父级元素实际宽度计算步骤中所述父级元素的实际宽度的计算方法，具体包括：
[0012]计算所述第一间距和所述第二间距的和值；
[0013]利用所述边框宽度减去所述和值，计算得到所述父级元素的实际宽度。
[0014]上述的提示框展示的方法，其中，所述提示框展示步骤中具体包括：
[0015]当所述目标标题的宽度大于所述父级元素的实际宽度时，则基于所述提示框进行所述目标标题的展示；
[0016]当所述目标标题的宽度小于等于所述父级元素的实际宽度时，则无需基于所述提示框进行所述目标标题的展示。
[0017]上述的提示框展示的方法，其中，还包括：
[0018]提示框创建步骤，根据预设样式设置tooltip组件，通过所述tooltip组件创建所述提示框，并基于所述提示框进行所述目标标题的展示。
[0019]上述的提示框展示的方法，其中，所述父级元素实际宽度计算步骤中所述父级元素的样式的获取方法，具体包括：
[0020]基于windouw.getComputedStyle(ref)获取所述父级元素的样式。
[0021]上述的提示框展示的方法，其中，所述目标标题宽度计算步骤中span标签的创建方法，具体包括：
[0022]基于document.createElement(span)创建span标签。
[0023]本专利技术还提供一种提示框展示的系统，包括：
[0024]父级元素获取单元，用于当检测到鼠标指针滑过网页中目标标题时，获取所述目标标题的父级元素及所述父级元素的边框宽度；
[0025]父级元素实际宽度计算单元，用于基于所述父级元素的样式，获取所述父级元素内所述目标标题距所述父级元素的边框的第一间距及距所述父级元素的边框的第二间距，根据所述边框宽度、所述第一间距及所述第二间距，计算得到所述父级元素的实际宽度；
[0026]目标标题宽度计算单元，用于基于创建的span标签，将所述目标标题填充至所述span标签中，将填充后的所述span标签展示于所述网页中，以此获得所述目标标题的宽度；
[0027]提示框展示单元，用于比较所述父级元素的实际宽度和所述目标标题的宽度的大小，根据比较结果，基于提示框进行所述目标标题的展示。
[0028]上述的提示框展示的系统，其中，还包括：
[0029]提示框创建单元，用于根据预设样式设置tooltip组件，通过所述tooltip组件创建所述提示框，并基于所述提示框进行所述目标标题的展示。
[0030]本专利技术还提供一种计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如上所述的提示框展示的方法。
[0031]本专利技术还提供一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如上所述的提示框展示的方法。
[0032]本专利技术的技术效果或优点：
[0033]本专利技术提供的一种提示框展示的方法，当检测到鼠标指针划过网页中目标标题时，获取目标标题的父级元素及父级元素的边框宽度，基于父级元素的样式，获取父级元素内目标标题距父级元素的边框的第一间距及距父级元素的边框的第二边距，根据边框宽度、第一间距和第二间距，计算父级元素的实际宽度，基于创建的span标签，将目标标题填充至span标签中，将填充后的span标签展示于网页中，以此获得目标标题的宽度，比较父级元素的实际宽度和目标标题的宽度的大小，根据比较结果，基于提示框进行目标标题的展示。通过上述方式，该方法在已经展示完全内容时自动不再展示提示框，而在未展示完全内容时可自动展示提示框，实现了提示框的合理展示，减少了提示框展示的冗余程度。
附图说明
[0034]图1为本专利技术实施例提供的一个提示框展示的方法的流程图；
[0035]图2为本专利技术实施例提供的一个提示框展示过程的示意图；
[0036]图3为本专利技术实施例提供的又一个提示框展示过程的示意图；
[0037]图4为本专利技术实施例提供的一个提示框的展示系统的结构示意图；
[0038]图5为本专利技术实施例提供的一个电子设备的框架图；
[0039]以上图中：
[0040]1、父级元素获取单元；2、父级元素实际宽度计算单元；3、目标标题宽度计算单元；4、提示框展示单元；5、提示框创建单元；
[0041]10、总线；11、处理器；12、存储器；13、通信接口；
[0042]20、网页；21、父级元素；22、目标标题；23、边框宽度；24、第一间距；25、第二间距。
具体实施方式
[0043]为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合本专利技术实施本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种提示框展示的方法，其特征在于，包括如下步骤：父级元素获取步骤，当检测到鼠标指针滑过网页中目标标题时，获取所述目标标题的父级元素及所述父级元素的边框宽度；父级元素实际宽度计算步骤，基于所述父级元素的样式，获取所述父级元素内所述目标标题距所述父级元素的边框的第一间距及距所述父级元素的边框的第二间距，根据所述边框宽度、所述第一间距及所述第二间距，计算得到所述父级元素的实际宽度；目标标题宽度计算步骤，基于创建的span标签，将所述目标标题填充至所述span标签中，将填充后的所述span标签展示于所述网页中，以此获得所述目标标题的宽度；提示框展示步骤，比较所述父级元素的实际宽度和所述目标标题的宽度的大小，根据比较结果，基于提示框进行所述目标标题的展示。2.根据权利要求1所述的提示框展示的方法，其特征在于，所述父级元素实际宽度计算步骤中所述父级元素的实际宽度的计算方法，具体包括：计算所述第一间距和所述第二间距的和值；利用所述边框宽度减去所述和值，计算得到所述父级元素的实际宽度。3.根据权利要求1所述的提示框展示的方法，其特征在于，所述提示框展示步骤中具体包括：当所述目标标题的宽度大于所述父级元素的实际宽度时，则基于所述提示框进行所述目标标题的展示；当所述目标标题的宽度小于等于所述父级元素的实际宽度时，则无需基于所述提示框进行所述目标标题的展示。4.根据权利要求1～3任一项所述的提示框展示的方法，其特征在于，还包括：提示框创建步骤，根据预设样式设置tooltip组件，通过所述tooltip组件创建所述提示框，并基于所述提示框进行所述目标标题的展示。5.根据权利要求1所述的提示框展示的方法，其特征在于，所述父级元素实际宽度计算步骤中所述父级元素的样式的获取方法，具体包括：基于...

【专利技术属性】
技术研发人员：孟露，
申请(专利权)人：北京秒针人工智能科技有限公司，
类型：发明
国别省市：