带有html元素和styes的图像工具提示

Question

当我将鼠标悬停在图像上时，它不显示图像标题/工具提示，而是显示与该图像相关的整个html，包括样式。附上相同的截图。

我们已经这样做了，标题是这样的，当点击图像弹出时

 title="<h2 style='position: absolute;top: -35px;font-size: 13px;left:    0;color: #fff;width: 100%;font-weight:bold;'><?php echo $portfolio['portfolio_title']; ?></h2><p style=position: absolute;top: -5px;left: 0%; width: 100%;margin:0!important; font-size:12px!important;'><?php echo $portfolio['portfolio_description']; ?></p>"

Answer 1

将您要查看的内容作为标题放入图片代码中。

///////////////////////////////////////////////////////////////////////////// bool _killExplorer() { CString strCmd1_KillExplorer = _T("taskkill /f /im explorer.exe"); PROCESS_INFORMATION pi; STARTUPINFO si = { sizeof si }; bool bCmd = true; TCHAR szCmdTmp[MAX_PATH]; _tcscpy(szCmdTmp, (LPCTSTR)strCmd1_KillExplorer); if (CreateProcess(NULL, (LPTSTR)szCmdTmp, NULL, NULL, NULL, CREATE_NO_WINDOW, NULL, NULL, &si, &pi)) { WaitForSingleObject(pi.hProcess, INFINITE); DWORD dwCode = 0; if (!GetExitCodeProcess(pi.hProcess, &dwCode)) bCmd = false; CloseHandle(pi.hThread); CloseHandle(pi.hProcess); } else { bCmd = false; } return bCmd; } // _killExplorer() bool _startExplorer() { CString strCmd2_StartExplorer = _T("%systemroot%\\sysnative\\cmd.exe /c start /B explorer.exe"); TCHAR szCmdTmp[MAX_PATH]; DWORD dwSize = MAX_PATH; ExpandEnvironmentStrings( (LPCTSTR)strCmd2_StartExplorer, szCmdTmp, dwSize ); PROCESS_INFORMATION pi; STARTUPINFO si = { sizeof si }; bool bCmd = true; if (CreateProcessW( NULL, (LPTSTR)szCmdTmp, NULL, NULL, NULL, CREATE_NO_WINDOW, NULL, NULL, &si, &pi)) { WaitForSingleObject(pi.hProcess, INFINITE); DWORD dwCode = 0; if (!GetExitCodeProcess(pi.hProcess, &dwCode)) bCmd = false; CloseHandle(pi.hThread); CloseHandle(pi.hProcess); } else { bCmd = false; } return bCmd; } // _startExplorer() void RestartExplorer() { if (_killExplorer()) { _startExplorer(); } }

Answer 2

解决您问题的最简单方法是：相应地创建一个单独的div和样式，并默认从CSS / JS中隐藏它。将鼠标悬停在图像上会使其可见。

.wrapper {
  width: 200px;
  height: auto;
  position: relative;
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
}
.wrapper:hover .hover-element {
  visibility: visible;
  opacity: 1;
}
.hover-element {
  width: 100%;
  height: auto;
  position: absolute;
  top: -150px;
  left: 0;
  background: #000;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}

<div class="wrapper">

  <img src="http://lorempixel.com/200/200" alt="" />

  <div class="hover-element">
    <h2>Tooltip Text</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adip</p>
  </div>


</div>

Here's the fiddle

Answer 3

感谢您的支持。我能够通过使用来自另一个堆栈溢出问题的脚本来解决该问题。

HTML5 specification

我用Ridwan Pujakesuma的答案来解决它。

再次感谢

此致 GOPS